一、Backbone概述

Backbone是一个基于MVC的前端js框架，它依赖于underscore.js和iquery.js的，所以在使用的时候需要引用三个js文件。

与之类似的MVC框架还有Angular.js，Knockout.js，Ember.js。

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script>

二、Backbone开发环境搭建

1.开发工具：推荐使用Sublime Text3
2.Web Server：我使用的是Tomcat
3.测试浏览器：Chrome

三、Backbone知识概要

Backbone主要包含以下几个模块：

Backbone是基于面向对象进行编程的。
路由（Backbone.Router）-> 模型（Backbone.Model）-> 视图（Backbone.View）

四、Model类和View类

1.Model类

是Backbone的模型层。

1.1原生的js对象

var _obj = {
        'title':'task1',
        'description':'description1'
}

浏览器测试：_obj

1.2.Backbone对Model的封装

var ToDoItem = Backbone.Model.extend({
        });

var toDoItem = new ToDoItem(_obj);

浏览器测试：_toDomItem

总结：新建一个Model类，并实例化。其实，在Model类中我们可以定义一些成员属性和成员方法，这样它的所有实例都会具有这些成员属性和成员方法。如上例，只在toDoItem这个实例中传入了属性，只有该个实例具有该属性。

1.3.Model类的set/get方法

toDoItem.set('title','title2');
toDoItem.get('title');

浏览器测试：

1.4.通过Model类的attributes成员属性获得某个属性

除了使用toDoItem.get(‘title’)的方法获得属性之外，我们还可以使用Model类的成员属性attributes点语法获得获得某个属性。

toDoItem.attributes.title

1.5.Model类的toJSON()成员方法

该方法返回一个JSON字符串。

toDoItem.toJSON();
toDoItem.toJSON().title;
toDoItem.toJSON().description;

2.View类

Backbone的视图层，对Model层的数据进行渲染和展示。

2.1.View类的创建和实例化

参考2.2。

2.2.修改View类的成员属性【内置属性】

var ToDoItemView = Backbone.View.extend({
            tagName:'li_tag',
            className:'item_task',
            id:'item1',
        });
var toDoItemView = new ToDoItemView();

浏览器测试：

内置的成员属性，可以根据name修改对应的value值。
el介绍：
el指向界面的HTML元素，它一般有两种表现形式：一种是DOM形式【el】，一种是jQuery形式【$el】。我们可以通过重载View类的成员方法render()来渲染el内部的所有元素；或者通过remove()来移除el本身(包含其内部的所有元素)。

2.3.自定义View属性

除了使用View类的内置成员属性之外，我们还可以为View类自定义一些成员属性。不过自定义的属性必须放在attributes内，如下：

        var ToDoItemView = Backbone.View.extend({
            attributes:{
                style:'color:red;'
            },
            id:'item01'
        }

浏览器测试：

上面的red颜色设置给了cssText，可以展开进行查看。
区分：
Model类的实例，其属性可以通过set/get方法进行操作，还可以通过.attributes获得属性。
View类的实例，其属性都包含在el元素内，可以通过el的点语法获得某个特定的属性。

2.4.为el元素分派选择器

我们可以为el元素指向某个id选择器、类选择器、标签选择器。方便指向el内部标签的父元素。
了解View的render()方法， 该方法负责对数据进行渲染。

2.5.插入html代码到el指向的id选择器/标签选择器

下面以id选择器和标签选择器为例，其它选择器应该是类似的。

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script>

header1

header2

<script type="text/javascript"> var ToDoItemView = Backbone.View.extend({ id:'myId', //区别于el属性 tagName:'p', render:function(){ this.$el.html('This is a new span.'); return this; } }); //该View在id选择器header1后增加 var toDoItemView1 = new ToDoItemView({ el:'#header1' //整个el的id，指向某个id选择器 }); toDoItemView1.render(); //该View在id选择器header2后增加 var toDoItemView2 = new ToDoItemView({ el:'#header2' }); toDoItemView2.render(); </script>

浏览器测试：

分析：
1.插入html代码的时候，为View定义的tagName和id没有起到作用(区别于插入：插入的时候是有效果的)。
2.上面的插入会清空原来标签内部的所有代码，代替的是render()中插入的html代码。上面的示例也表明了：p标签内部原来是有文本数据的，但是执行插入的时候，原来的文本都被移除了。

上面是根据id选择器来插入的，还可以根据标签选择器进行插入。

var toDoItemView1 = new ToDoItemView({
            el:'p'  //整个el的id，指向某个id选择器
        });
toDoItemView1.render();

执行效果相同。

2.6.追加html代码到html标签内部

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script>

header1

header2

<script type="text/javascript"> var TodoItem = Backbone.Model.extend({}); var toDoItem = new TodoItem({ 'title':'title1', 'description':'description1' }); var ToDoItemView = Backbone.View.extend({ /** *插入的时候，el的父元素就是el指向的选择器标签。 *追加的时候，tagName就是el的父元素。 */ tagName:'p', id:'myId', //p标签的id render:function(){ this.$el.html('This is a new span.'); return this; } }); /** * 插入的内容变成了 *

* This is a new span. *

*/ new ToDoItemView().render().$el.appendTo($('body')); new ToDoItemView().render().$el.appendTo($('body')); </script>

浏览器测试：

分析：
1.View的一个实例只能执行一次render()，如果使用同一个view实例多次执行追加，结果只追加了一次。

2.7.View的remove()方法

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script>

header1

header2

<script type="text/javascript"> var ToDoItemView = Backbone.View.extend({ tagName:'p', id:'myId', //p标签的id render:function(){ this.$el.html('This is a new span.'); //this.$el.html(''+this.model.get('title')+''); return this; } }); var view1 = new ToDoItemView(); var view2 = new ToDoItemView(); view1.render().$el.appendTo($('body')); view2.render().$el.appendTo($('body')); view1.remove(); </script>

浏览器测试：

注意：结果显示只移除了一个p，所以一个View的实例，只能移除该实例的el本身。

3.Model和View的绑定

下面以一个实例，讲解如果将Backbone的Model和View连接起来，在View中获得Model实例，在Model中…

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script>

header1

header2

<script type="text/javascript"> var TodoItem = Backbone.Model.extend({}); var toDoItem = new TodoItem({ 'title':'title1', 'description':'description1' }); var ToDoItemView = Backbone.View.extend({ tagName:'p', id:'myId', //p标签的id render:function(){ /** * this.model获得调用render()的view所绑定的model实例 */ this.$el.html('hay,boy!'+this.model.get('title')+''); return this; } }); //Backbone的Model与View进行关联 var view1 = new ToDoItemView({ model:toDoItem }); var view2 = new ToDoItemView(); view1.render().$el.appendTo($('body')); view2.render().$el.appendTo($('body')); </script>

浏览器测试：

分析：
1.我们可以在新建view的实例的时候，绑定到某个model实例。
2.只有绑定了model的View才能获得可以通过this.model拿到该model实例。所以上面的代码view2在执行追加el元素的时候，是失败的。

其它：如果我们通过set方法来修改了Model实例的属性，必须调用View实例的render方法来重新渲染。

五、Model事件和View事件

1.Model事件

知识概要图如下：

1.1.Model事件的监听要点

1）Model内部对常用事件的监听做了封装，我们也可以自定义监听事件。
2）事件的监听用on，取消监听用off，一次性监听用once。
3）Model封装的常用内置监听事件：change()/destroy()/async()/invalid()等
4）change监听：用来监听Model对象的属性变化。当属性发生真实意义上的变化时，会自动触发change监听。我们可以通过change:’title’的形式监听Model对象中的单个属性’title’的变化。
5）我们可以自定义其它名称的监听，如go监听，move监听等，只是名称而已。不过自定义的监听的触发需要手动调用trigger(‘监听名称’)。如：trigger(‘go’)
6）Model对象之间的监听使用：listenTo()

1.2.Model属性比较器

如果通过set函数修改属性的时候，属性值没有发生真实意义上的变化(即前后属性值是一样的)，是不会触发change回调的。只有前后属性值不一样，才会触发change事件。

1.3.set()方法的可选属性silent

该属性值是boolean类型，用于设置是否自动触发change回调，默认false。
true：不触发
fasle：触发

model1.on('change',function(){
            console.log('change event is triggered by set function()');
            //this.changed对象，知道Model的哪些属性发生了变化
            //console.log(this.changed);
            //
            if(this.hasChanged('title')){
                console.log('title attribute is changed.');
            }else{
                console.log('title attribute is not changed.');
            }
        }); 

浏览器测试：

1.4.change()回调

知识要点：

//1.监听所有属性
model1.on('change',function(){...}
//2.监听单个属性
model1.on('change：title',function(){...}
//3.获得变化的属性
this.changed
//4.判断某个属性是否变化
if(this.hasChanged('title')){...}

---

change回调监听model属性的变化。

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script><script type="text/javascript"> var TodoItem = Backbone.Model.extend({}); var model1 = new TodoItem({ 'title':'title1', 'description':'description1' }); model1.on('change',function(){ console.log('change event is triggered by set function()'); //this.changed对象，知道Model的哪些属性发生了变化 console.log(this.changed); }); </script>

浏览器测试：

thi.changed对象：输出变化了的属性。

监听某个属性的变化：

    //内置事件：只监听title属性的变化
        model1.on('change:title',function(){    
            console.log('attribute is changed.');       
            if(this.hasChanged('title')){
                console.log('title attribute is changed.');
            }else{
                console.log('title attribute is not changed.');
            }
        }); 

1.5.Model对象之间的监听:listenTo()

用途：一个Model对象监听另外一个Model对象的事件【内置事件或自定义事件】

<script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script><script type="text/javascript"> var TodoItem = Backbone.Model.extend({}); var model1 = new TodoItem({ 'title':'title1', 'description':'description1' }); model1.on('change',function(){ if(this.hasChanged('title')){ console.log('title attribute is changed.'); }else{ console.log('title attribute is not changed.'); } }); model1.on('lala',function(){ console.log('lala'); }); //对象之间的监听 var model2 = new TodoItem({ }); model2.listenTo(model1,'change',function(){ console.log('listen to modle1 change event!'); console.log(this); //这里的this是model2 }); model2.listenTo(model1,'lala',function(){ console.log('listen to modle1 lala custom event!'); console.log(this); //这里的this是model2 }); </script><script type="text/javascript"> </script>

浏览器测试：

1.6.trigger()函数

手动触发自定义事件监听

modle1.on('lala',function(){
            console('lala');
});

浏览器测试：

它也可以触发内置事件：

2.View事件

3.事件原理