backbone

Backbone.js供应模子(models)、鸠合(collections)、视图(views)的组织。

• Models: 是援用顺序的中心，也是示意数据，用于绑定键值数据和自定义事宜

• Collectoins：是对Model的一个容器，包括多个模子，并供应一些要领，来接见这些模子，鸠合附有可罗列函数的雄厚API

• View：能够在视图中声明时刻，在视图中处置惩罚鸠合或许模子，也能够地工艺要领啊，能够暴露出来一些托言，视图能够声明事宜处置惩罚函数，并经由过程接口连接到应用顺序。

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

运用
依靠的东西库
jquery.js,zepto.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，属性称号

• 参数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要领的运用：

• 第一个参数示意事宜的称号

• 第二个参数示意事宜的回调函数
  当挪用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'
});

// extend
var 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();

• 参数能够是字符串，那末就将该字符串衬着成元素

• 参数也能够是dom元素，那末就直接该元素替代

在实例化后变动，所以不会影响到原组织函数已实行的逻辑

divView.setElement('<h1>123</h1>');

猎取视图内部的元素

$:视图实例化对象为我们供应了一个要领来猎取其本身的元素

this.$el.html();  

视图模板

template, underscore供应猎取并格式化模板的要领

tpl: _.template('<div>￥<%= price%></div>');        

//moduel
var Price = Backbone.Model.extend({
    defaults: {
        price: 100,
        info: 'xixihaha'
    }
})

//view
var View = Backbone.View.extend({
    
    model: new Price(),
    tpl: _.template('<div><span class="price">¥<%= price%></span><span class="mail"><%= info%></span></div>'),
    
    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)
    }
})    

collection

鸠合：示意数据模子的一个有序鸠合

• 每一个要领都有返回值

• 每一个要领一般会有一个对应的事宜，这个事宜的称号大部分是要领的称号

建立collection

var ItemContainer = Backbone.Collection.extend({
    model: ItemModel //鸠合对应的模子
});

实例化collection

//能够通报  js 对象,然则没有id {} ,不发起
var item = new ItemModel();
var itemContainer = new ItemContainer(item); //一个 模子
var itemContainer = new ItemContainer([item1,item2]); //多个模子

collection增添模子

向鸠合中增添一个模子（或一个模子数组），会触发”add”事宜.
反复增添模子实例化对象会被去重的

var item = new ItemModel();
itemContainer.add(item);
itemContainer.add([item1]);

转成JSON

能够将一个鸠合转化为一个JSON对象
获得的结果是一个新的对象，不是对原有对象的援用

itemContainer.toJSON() 

猎取模子

get ：吸收模子参数，吸收id，或许cid（假如对象有id，能够经由过程对象猎取，假如对象没有id就不能经由过程id猎取）
在建立模子的时，通报id属性，此时，id属性会被通报到模子的最外成属性（attributes，cid，changed在一个条理）

itemContainer.get(item);
itemContainer.get(id);
itemContainer.get(cid);

删除模子

remove：删除鸠合中的模子

• 能够通报一个模子

• 也能够通报一个模子构成的数组

• 还能够通报一个具有id的对象

• 返回的结果是删除的模子实例化对象

itemContainer.remove(item);
itemContainer.remove([item,time2]);

// remove 函数
//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {

        this.on('remove',function ( model ) {
            
            console.log( model );
            
        });
        
    }
})

collection initialize

collection组织函数，是在collection被实例化的时刻挪用，在它内里增添的事宜会监听一切的实例化对象

var IterContainer = Backbone.Collection.extend({
    model: ItemModel,

    initialize: function () {

        this.on('add',function ( model ) {

            console.log(model); //false

        });

    }
});

collection events

collection 增添事宜，事宜有两种增添体式格局

增添在组织函数内，此时会监听一切实例化对象
增添在实例化对象上，只能监听背面增添的行动，只能监听该实例化对象上增添行动

//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {
        
        // add 增添  //在 initialize内增添
        this.on('add',function (model) {

            console.log( model );

        });
        
    }
})

//itemCollection.add([item,item2]); 触发事宜

//实例化对象上增添
itemContainer.on('add', function ( model ) {

    console.log( model );

});

重置collection

reset() 清空collection

reset事宜与其他要领的事宜的区分，reset事宜的回调函数中的参数是一个鸠合实例化对象，该对象就是组织函数中的this，
其他要领的事宜的回调函数的参数是一个模子实例化对象，不等于组织函数中的this
reset事宜与其他要领的事宜区分，reset事宜的回调函数中的参数是一个鸠合实例化对象，该对象就是组织函数中的this。
别的要领的时刻的回调函数

colletion.reset();

//reset 事宜

//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {
        
        //绑定事宜
        this.on('reset',function ( model ) {
            
            console.log( model );
            
        });
        
    }
}

collection 映照数据

fetch
从服务端拉取数据映照到鸠合中

注重：在collection中 声明属性 url

var ItemModel = Backbone.Model.extend({});
            
var ListCollection = Backbone.Collection.extend({
    model: ItemModel,
    url: 'data/list.json',  //声明
    initialize: function () {
        
        this.on('add',function ( model ) {
            
            console.log( model );
            
        });
        
    }
});

var listCollection = new ListCollection();

//拉取数据
listCollection.fetch({
    success: function ( collections ) {
        
        console.log( collections,'collections' );
        
    }
});

路由 router

//路由

var Routers = Backbone.Router.extend({
    
    routes: {
        home: 'showHome',
        'en/ch/:dict': 'showSerch'
    },
    
    showHome: function () {

        console.log('showHome');
        
    },
    
    showSerch: function ( dict ) {
        
        var dictView = new DictView({
            el: $('.div')
        });
        
        dictView.render( dict );
        
    }
    
});

var router = new Routers();

//开启 路由 //须要在 history 最先
Backbone.history.start();

路由划定规矩

经由过程 ‘/’ 举行路由切分,自在婚配猎取，再前面加’:’ (注重：第一个’/’无足轻重)

#search/:query:page

*other 示意别的不婚配的划定规矩都到该路由下，一般将该划定规矩放到末了

var Routers = Backbone.Router.extend({

routes: {
    home: 'showHome',
    'en/ch/:dict': 'showSerch',
    '*other': 'showDefault'
},

showHome: function () {
    console.log('showHome');
},

showSerch: function ( dict ) {
    
    var dictView = new DictView({
        el: $('.div')
    });
    
    dictView.render( dict );
    
},

showDefault: function () {
    
    console.log('showDefault');
    
}

});

var router = new Routers();

//开启 路由
Backbone.history.start();

Events

在backbone顶用events示意事宜对象，然则它是单体对象，不要直接运用它，将它的属性和要领继续下来。
为了防止争执，须要运用空对象增添属性和要领。

var myEvent = _.extend({}, Backbone.Events);

定阅事宜

on要领定阅事宜

var EventsModel =  Backbone.Model.extend();


var events = new EventsModel();

events.on('dd',function ( msg ) {
    
    console.log( msg );
    
});

发送事宜

trigger()

events.trigger('dd','info');  

注销事宜

off()
注销事宜，写在触发事宜的前面
注销带有定名空间的事宜，须要增添上定名空间

myEvent.off('change')
myEvent.off('change:color')

作废别的对象监听

stopListening()
参数：

• 能够不传，作废一切对一切对象的监听

• 一个参数：被监听的对象，此时作废该对象上的一切的事宜监听

• 两个参数：此时作废该对象上该事宜的监听

  // 作废监听
  ev1.stopListening();
  
  // 仅仅作废对ev2的监听
  ev1.stopListening(ev2);
  
  // 仅仅作废ev2上面的change事宜
  ev1.stopListening(ev2, 'change');
  

多个对象音讯监听

//多个事宜 联络
 
var ev1 = _.extend({},Backbone.Events);
var ev2 = _.extend({},Backbone.Events);
var ev3 = _.extend({},Backbone.Events);

ev2.listenTo(ev1, 'change', function ( msg ) {
    
    console.log( msg );
    
});

ev2.listenTo(ev1, 'add', function ( msg ) {
    
    console.log(msg);
    
});

ev2.listenTo(ev1, 'dd', function ( msg ) {
    
    console.log(msg);
    
});

ev2.stopListening(ev1, 'change');

ev1.trigger('change', 'hello');
ev1.trigger('add', 'world');

ev1.trigger('dd', 'pink');

M、V、Collections音讯监听

//模子 和  视图  之间的 事宜联络  collection 和 view 之间的联络
var eventModel = new Backbone.Model();

var eventView = new Backbone.View();

var EventCollection = Backbone.Collection.extend();

var eventCollection = new EventCollection();

eventView.listenTo(eventModel,'change',function ( msg ) {
    
    console.log(msg);
    
});

eventView.listenTo(eventCollection, 'remove', function ( msg ) {
    
    console.log( msg,'--' );
    
});

eventModel.set({
    color: 'pink',
    age: 2
});

eventCollection.add(eventModel);
eventCollection.remove(eventModel);