Backbone入门

(一)Backbone简介

Backbone是一个轻量级的JavaScript MVC框架，压缩后只有23kb，不过它依赖于Underscore.js和jQuery这两个JS库。Backbone是由Jeremy Ashkenas创建的，Underscore.js也是他创建的，他还创建了CoffeeScript这门优雅的JS转译语言。

模型(Model)是Backbone中的一个关键组件，Model用来存储应用的所有数据，以及直接和数据操作相关的逻辑，包括数据存储，数据验证，以及数据发生变动时触发相关动作。无论何时一个UI动作导致了模型属性的变化，模型都会触发change事件，这时用来展示模型状态的视图(View)会收到反馈，并做出相应的响应，重绘UI。你不用写那些胶水代码去更新你的DOM，比如通过元素id去找到某个元素，然后对其进行操作。只要模型改变了，视图就会更新。

视图(View)是用来把模型中的数据显示到页面上的，同时也可以监听DOM上的事件然后做出响应。

集合(Collection)是model对象的一个有序的集合。

(二)模型(Model)

使用Backbone之前要引入以下三个JS文件：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<script src="http://underscorejs.org/underscore-min.js"></script>

<script src="http://backbonejs.org/backbone-min.js"></script>

1.创建一个model

var Person = Backbone.Model.extend({
     initialize: function(){
          alert('Hello world!');
     }
});
var person = new Person;

 

    创建了一个Model对象Person，并在初始化的时候输出“Hello world!”,接着定义了一个Person对象的实例person，执行以上代码会在页面弹出“Hello world!”的框。

 

2.设置model属性

var Person = Backbone.Model.extend({
     initialize: function(){//实例化时会执行这里的代码
          alert('Hello world!');
     }
});
//在实例化model时设置
var person = new Person({
     name: 'Jack',
     age: 20
});
//也可以在model实例化后，通过set方法进行设置
var person = new Person;
person.set({
     name: 'Elizabeth',
     age: 18
});
person.set('age', 22);//设置单个属性

 

    这里提供了设置model指的三种方式：实例化时设置、通过set方法设置多个属性、通过set方法设置单个属性。

3.获取model属性

var Person = Backbone.Model.extend({
     initialize: function(){
          console.log('Hello world!');
     },
     aboutMe: function(){
          return 'I\'m ' + this.get('name') + ', i live in ' + this.get('address').street;
     }
});
var person = new Person({
     name: 'Asan',
     address: {
          street: 'Mongo Street'
     }
});
console.log(person.aboutMe());
console.log(person.get('name'));

 

    在model中定义了一个aboutMe方法，在里面通过this.get方法可以获取到model属性的值，并返回。Person的实例可以调用aboutMe方法，输出model属性的值。

 

4.设置model默认属性

var Person = Backbone.Model.extend({
    defaults: { //设置默认属性
        name: 'Kagol Antony',
        address: {
            street: '1st Street',
            city: 'Shenzhen',
            State: 'TX',
            zipCode: 78701
        }
    },
    initialize: function(){//初始化，首先执行
        console.log('hello world!')
    },
    aboutMe: function(){
        return 'I\'m ' + this.get('name') + ', i live in ' + this.get('address').street;
    }
});
var person = new Person({
     name: 'Asan'
});
console.log(person.get('name'));//Asan
console.log(person.get('address').city);//Shenzhen

 

    可以通过设置model的defaults属性为model设置默认属性。

5.使用model属性

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Kagol Antony',
        hobby: 'basketball'
    },
    initialize: function(){
        console.log('hello world!')
    },
    like: function(hobbyName){
        this.set({
             hobby: hobbyName
        });
    }
});
var person = new Person;
person.like('coding');
console.log(person.get('hobby'));

 

    在model中定义了一个like方法，接受一个参数，为爱好的名称(hobbyName)，用于设置hobby属性。

 

6.监听model属性的变化

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Elizabeth',
        age: 18
    },
    initialize: function(){
        console.log('hello world');
        this.on('change:name', function(model){
            var name = model.get('name');
            console.log('Changed my name for ' + name);
        })
    }
});
var person = new Person ({
    name: 'Jack',
    age: 20
}); //实例化的时候改变name属性不会触发change事件
person.set({name: 'Kagol'});//触发change事件，输出：'Changed my name for Kagol'
console.log(person.hasChanged());//true
console.log(person.changedAttributes());// Object {name: "Kagol"}

 

    在初始化时通过this.on方法绑定change事件，可以监听model中某个属性的变化，例子中是监听name属性，只要name属性一改变就在控制台输出改变后的name。

 

7.数据验证

var Person = Backbone.Model.extend({
    validate: function(attributes){
        if(attributes.age < 0){
            return 'You can\'t be negative years old';
        }
    },
    initialize: function(){
        console.log('hello, world!');
        this.on('invalid', function(model, error){
            console.log(error);
        })
    }
});
var person = new Person;
person.set({name: 'Mary Poppins', age: -21}, {validate: true});// 会验证，输出"You can't be negative years old"
person.set({name: 'Mary Poppins', age: 20}, {validate: true});//不会验证
person.set({name: 'Mary Poppins', age: -21}, {validate: false});//不会验证
person.set({name: 'Mary Poppins', age: -21});//不会验证

 

    在model的validate方法中可以定义验证的逻辑，它接受一个参数attributes，代表model的属性，这里是验证了model的age属性，当其小雨0时，返回一段提示文字。在初始化时要通过this.on绑定invalid方法。在通过set方法设置model属性的时候，必须带上第二个参数{validate: true}，才会验证。

(三)视图(View)

1.加载模板

<script type="text/template" id="search_template">
    <label>My Search: </label>
    <input type="text" id="search_input">
    <input type="button" id="search_button" value="Search">
</script>
<div id="search_contailer"></div>

 

var SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        var template = _.template($('#search_template').html(), {});
        this.$el.html(template);
    }
});
var search_view = new SearchView({
    el: $('#search_contailer')
});

 

    这里需要用到Underscore.js的模板库_.template，模板可以写在View的外面，通过type为"text/template"的script标签包裹，还要定义一个容器(这里是一个div)用于容纳模板的内容。

    定义一个视图(View)和定义一个model非常类似，它也有一个initialize方法，用于初始化，render方法(在初始化时被调用)用于渲染模板。

 

2.添加监听事件

var SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        var template = _.template($('#search_template').html(), {});
        this.$el.html(template);
    },
    events: {//添加事件
        'click #search_button': 'doSearch'
    },
    doSearch: function(){
        console.log('Search for ' + $('#search_input').val());
    }
});
var search_view = new SearchView({
    el: $('#search_contailer')
});

 

    添加监听事件只要在view的events属性中配置就可以了，可以配置多个事件。

3.向模板中传递参数

<script type="text/template" id="search_template">
    <label><%= search_label %></label>
    <input type="text" id="search_input">
    <input type="button" id="search_button" value="Search">
</script>
<div id="search_contailer"></div>

 

var SearchView = Backbone.View.extend({
    el: $('#search_contailer'),//可以将el直接写在这里
    initialize: function(){
        this.render();
    },
    render: function(){
        var variables = {//使用模版变量
            search_label: 'Kagol Search: ' // 可以传递多个参数
        };
        var template = _.template($('#search_template').html());
        this.$el.html(template(variables));
    },
    events: {//添加事件
        'click #search_button': 'doSearch'
    },
    doSearch: function(){
        console.log('Search for ' + $('#search_input').val());
    }
});
var search_view = new SearchView;

 

    要在模板中传递参数，只需要在把一个对象传递给_.template()()即可。

(四)集合(Collection)

<script type="text/template" id="artist_template">
    <% _.each(artists, function(artist){ %>
        <tr>
            <td><%= artist.get('name') %></td>
            <td><%= artist.get('hometown') %></td>
        </tr>
    <% }); %>
</script>
<table id="table"></table>

 

var Artist = Backbone.Model.extend({
    defaults: {
        name: 'Jack',
        hometown: 'American'
    },
    initialize: function(){}
});
var Artists = Backbone.Collection.extend({
    model: Artist
});
var artist1 = new Artist;
var artist2 = new Artist({
    name: 'Kagol',
    hometown: 'China'
});
var artist3 = new Artist({
    name: 'Elizabeth',
    hometown: 'England'
});
var artists = new Artists([artist1, artist2, artist3]);
var ArtistView = Backbone.View.extend({
    el: $('#table'),
    template: _.template($('#artist_template').html()),
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.html(this.template({
            artists: artists.models
        }));
    }
});
var artistView = new ArtistView;

 

    这个例子中，先创建了一个model，叫Artist，然后定义了一个Artist的Collection，名为Artists。接着定义了三个Artist的实例和一个Artists的实例，并用那三个Artist的实例初始化artists。接着定义了一个View，在render方法中定义了一个参数叫artists，它是一个数组，也就是那个Artist的实例。

    值得注意的是模板中使用了Underscore.js的_.each，用于循环遍历，第一个参数就是参数artists，第二个参数是回调函数。

 

(五)总结

      Backbone最适合的应用场景是单页面应用(SPA)，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。Backbone在这种场景下，能很好地实现模块间松耦合和事件驱动。Backbone不像Angular一样帮你做好了很多事，你只能在它限定的规则下写代码，而是可定制性很高，使用Backbone提供的工具，你可以做任何你想做的事。