码迷，mamicode.com
首页 > 其他好文 > 详细

Backbone的使用

时间：2016-05-28 01:22:05      阅读：208      评论：0      收藏：0      [点我收藏+]

标签：

一、Backbone概述

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

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

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

二、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选择器和标签选择器为例，其它选择器应该是类似的。

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <p id=header1>header1</p>
        <p id=header2>header2</p>
        <script type="text/javascript"> 
        var ToDoItemView = Backbone.View.extend({
            id:‘myId‘,  //区别于el属性
            tagName:‘p‘,
            render:function(){
                this.$el.html(‘<span>This is a new span.</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>
</body>
</html>

浏览器测试：
技术分享

分析：
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标签内部

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <p id=header1>header1</p>
        <p id=header2>header2</p>
        <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(‘<span>This is a new span.</span>‘);
                return this;
            }

        });
        /**
         * 插入的内容变成了
         * <p id=‘myId‘>
         *  <span>This is a new span.</span>
         * </p>
         */
        new ToDoItemView().render().$el.appendTo($(‘body‘));
        new ToDoItemView().render().$el.appendTo($(‘body‘));
    </script>
</body>
</html>

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

2.7.View的remove()方法

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <p id=header1>header1</p>
        <p id=header2>header2</p>
        <script type="text/javascript"> 
        var ToDoItemView = Backbone.View.extend({
            tagName:‘p‘,
            id:‘myId‘,  //p标签的id

            render:function(){
                this.$el.html(‘<span>This is a new span.</span>‘);
                //this.$el.html(‘<span>‘+this.model.get(‘title‘)+‘</span>‘);
                return this;
            }

        });
        var view1 = new ToDoItemView();
        var view2 = new ToDoItemView();

        view1.render().$el.appendTo($(‘body‘));
        view2.render().$el.appendTo($(‘body‘));

        view1.remove();

    </script>
</body>
</html>

浏览器测试：
技术分享
注意：结果显示只移除了一个p，所以一个View的实例，只能移除该实例的el本身。

3.Model和View的绑定

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

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <p id=header1>header1</p>
        <p id=header2>header2</p>
        <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(‘<span>hay,boy!‘+this.model.get(‘title‘)+‘</span>‘);
                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>
</body>
</html>

浏览器测试：
技术分享
分析：
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属性的变化。

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <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>
</body>
</html>

浏览器测试：
技术分享
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对象的事件【内置事件或自定义事件】

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
        <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>
</body>
</html>
<script type="text/javascript">
</script>

浏览器测试：
技术分享

1.6.trigger()函数

手动触发自定义事件监听

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

浏览器测试：
技术分享

它也可以触发内置事件：
技术分享

2.View事件

3.事件原理

Backbone的使用

标签：

原文地址：http://blog.csdn.net/z18789231876/article/details/51520571
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！