backbone

Backbone.js提供模型(models)、集合(collections)、视图(views)的结构。

1. Models: 是引用程序的核心，也是表示数据，用于绑定键值数据和自定义事件

2. Collectoins：是对Model的一个容器，包含多个模型，并提供一些方法，来访问这些模型，集合附有可枚举函数的丰富API

3. View：可以在视图中声明时间，在视图中处理集合或者模型，也可以地工艺方法啊，可以暴露出来一些借口，视图可以声明事件处理函数，并通过接口连接到应用程序。

4. Router： 路由， 看作简化版的控制器。(Backbone弱化了Controller)

使用
依赖的工具库
jquery.js
underscore.js/lodash.js

Model

创建模型

//构造函数：var pink = new Backbone.Model({    color: 'pink'});

//extend:var Pink = Backbone.Model.extend({});var p = new Pink({    color: 'pink'});

默认值

defaults: 表示模型类的默认值， 当模型实例化的时候，这些默认值就会被赋值上。

var WangCai = Backbone.Model.extend({    //默认值    defaults: {        kg: 20,        name: 'wangcai',        age: 2    }});    

initalize

initialize: 在模型对象的实例化时，构造函数可以对模型再次更改

var WangCai = Backbone.Model.extend({    //构造函数    initialize: function () {        if ( this.attributes.price ) {            this.attributes.onSale = true;        }    }});

获取属性

get，获取模型实例化对象属性的方法，直接在模型实例化对象上调用
参数：表示属性值

var WangCai = Backbone.Model.extend({    //默认值    defaults: {        kg: 20,        name: 'wangcai',        age: 2    },    //构造函数    initialize: function () {        if ( this.attributes.price ) {            this.attributes.onSale = true;        }    }});var ww = new WangCai({    price: 1000});var price = ww.get('price');console.log( price ); //1000

Json 转化

toJSON： 将模型对象的attributes属性转化为JSON对象，该方法直接在模型对象上调用
等同于JSON.parse(JSON.stringify(clothes))方法

var clothes = new Clothes({    price: 158})var attributes = clothes.toJSON();

设置属性

set()
设置模型实例化对象属性方法，直接在实例化模型对象上调用

第一种传参方式

1. 参数1，属性名称

2. 参数2，属性值

第二种传参方式
传递一个对象，这个对象映射到模型的attributes上的属性对象

var ww = new WangCai({    price: 1000});ww.set('color','pink');    ww.set({    say: function () {},    zf: 'dd'});

Model事件

Backbone实例对象的继承Backbone.Model，Backbone.Model继承了事件的方法，所以就可以在构造函数中使用绑定事件的方法on，通过this访问

on方法的使用：

1. 第一个参数表示事件的名称

2. 第二个参数表示事件的回调函数
   当调用set添加属性时候会触发change事件，但set传递{silent: true}参数时候，该事件就不能被触发了

//构造函数initialize: function () {    //on事件可以使用命名空间    this.on('change',function ( model ) {        console.log(123);    });}

ww.set({    say: function () {},    zf: 'dd'},{silent: true });//添加属性不被事件捕获， 通过 set的第二个参数 {silent: true} 来设置

模型对象是否被修改

hasChanged() 当模型调用了set更改属性的时候，该方法返回true，表示被修改过。

//  ww 实例对象 未被修改console.log( ww.hasChanged() );// false //            ww.set('color','pink',{silent: true });    ww.set({    say: function () {},    zf: 'dd'},{silent: true });//实例对象  已经被修改，添加 其它属性和方法 console.log( ww.hasChanged() );// true

删除属性

unset() 删除模型实例化对象上属性， 直接在实例化对象上调用
参数1：删除的属性名
参数2：一些配置

ww.unset('zf');

validate：检验删除是否合理，但是删除方法unset时候，必须传递{validate： true}才能校验
validate 验证删除是否合理，在unset第二个参数传递。

参数，是该实例化对象的attributes对象
返回：
true 删除失败
false 删除成功

ww.validate = function (attr) {    if (!attr.width) {        return true;        }    return false;}// 验证删除操作var result = a.unset('width', {validate: true})               

View

backbone 视图层

创建

//构造函数var App = new Backbone.View({    tanName: 'h1',    id: 'app',    className: 'app'});

// extendvar App = Backbone.View.extend({    initialize: function () {        this.$el.html('¥79.00').css({            'background': 'tan'        })    }});

view实例化对象

cid： 该视图实例化id
el： 该元素
$el: jquery的对象

视图元素

el：表示视图的元素

实例化创建添加属性

var divView = new App({    el: $('# app')});

initialze

initialze 表示视图类的构造函数

var App = Backbone.View.extend({    initialize: function () {        this.$el.html('¥79.00').css({            'background': 'tan'        })    }});

更改元素

setElement 将新元素替换原有的元素
divView.setElement();

1. 参数可以是字符串，那么就将该字符串渲染成元素

2. 参数也可以是dom元素，那么就直接该元素替换

在实例化后更改，所以不会影响到原构造函数已经执行的逻辑

divView.setElement('# 123');

获取视图内部的元素

$:视图实例化对象为我们提供了一个方法来获取其自身的元素

this.$el.html();  

视图模板

template, underscore提供获取并格式化模板的方法

tpl: _.template('￥');        

//moduelvar Price = Backbone.Model.extend({    defaults: {        price: 100,        info: 'xixihaha'    }})//viewvar View = Backbone.View.extend({    model: new Price(),    tpl: _.template('¥'),    initialize: function () {        //数据        var data = this.model.toJSON();        //html        var html = this.tpl(data);        this.$el.html(html).css('background','pink');    }})var appView = new View({   // model: new Price(),  //model 也可以在 new View() 实例化的时候 进行    el: $('# app')});

渲染视图

render：为了让视图实例对象可以在外部渲染视图，定义的方法

// 视图var App = Backbone.View.extend({    render: function () {        // 渲染父页面的视图        var item = new Item({            model: new Price() //子视图实例化        })        item.render();        // console.log(item.el)        this.$el.append(item.el)    }});            var app = new App({    el: $('# app')});app.render();

view 事件监听

events： 基于委托模式，对el元素委托

{    '事件名 委托元素的选择器': '事件回调方法'}

var ItemView = Backbone.View.extend({    tpl: _.template($('# itemView').html()),    events: {        'mouseleave .item': 'hideSeeDom'    },    hideSeeDom: function (e) {            this.$('.see').hide().css('top', 290)    }})       

关键字：JavaScript, var, backbone, 实例化

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！