randy-ran
4/14/2014 - 2:02 PM

How to use Backbone.js.md

Backbone.js

Simple Starting Point

创建 Model

var Person = Backbone.Model.extend();

实例化 && 读写

var person = new Person({
    id: 1,
    name: "Albert Yu"
});

person.get("name"); // "Albert Yu"

person.set({name: "Yu Fan"});

创建 View

var PersonView = Backbone.View.extend({
    render: function() {
        var person = "<p>" + this.model.get("user") + "</p>";
        $(this.el).html(person);
    }
});

最后一行的 this.el 蕴含了丰富的意义:

  1. 每一个 View Model 事实上创建了一个页面作用域(Page Scope),el 即是该作用域下的顶级标签,其默认标签是 <div></div>

  2. this 在这里就是指代了此 View Model 所定义的作用域;

  3. render 方法里生成的页面元素都会被包裹在 el 之内,并受到 this 的控制。

实例化 && 添加页面元素(获取 Model 的数据)

var personView = new PersonView({
    model: person;
})

personView.render();
console.log(personView.el); // check the el

Better Model

缺省数据

在创建 Model 的时候,可以指定缺省数据:

var Person = Backbone.Model.extend({
    defaults: {
        name: "unnamed";
        dob: new Date()
    }
});

注意:在 Javascript 中,对象是通过引用传递的,这就意味着动态生成的数据会保持第一次执行时的状态。像上面那个例子,每次初始化一个 Person 的实例都会产生相同的 dob 数字。可以把 defaults 定义为一个函数来解决这个问题。如下:

var Person = Backbone.Model.extend({
    defaults: function() {
        return {
            name: "unnamed";
            dob: new Date()
        }
    }
});

从服务器获得数据(RESTful way)

var Person = Backbone.Model.extend({urlRoot: "/people"}); // 指定数据来源

var person = new Person({id: 1}); // 指定对象目标

person.fetch(); // GET /people/1

person.set({name: "Albert Yu"}); // 修改数据属性
person.save(); // PUT /people/1

var newPerson = new PersonModel(); // 生成新对象
newPerson.set({name: "John Doe"}); // 设置对象属性
newPerson.save(); // POST /people

newPerson.get("id"); // 2
newPerson.destroy(); // DELETE /people/2

监听对象的变化(并做出响应)

var person = new Person({id: 1}); // 生成实例对象

person.on("change", function() {
    alert("Something changed on " + this.get("name") + " you!");
});

注册在 person 对象下的 change 事件是 Backbone.js 的内置事件之一。

  • 另外,我们还可以只针对对象的个别属性进行监听:
var person = new Person({id: 1});

person.on("change:name", function() { // 现在只监听 name 属性是否变化
    alert("Your name has changed!");
});

将数据转化成 JSON 对象格式

var person = new Person({id: 1});

console.log(person.toJSON());

// or, maybe you need this:
console.log(JSON.stringify(person));

Better View

定义 View 的顶级标签(el)属性

var PersonView = Backbone.View.extend({
    tagName: "article",
    id: "personOne",
    class: "person",
    attributes: {
        title: this.model.get("name")
    },

    render: function() {
        var person = "<p>" + this.model.get("name") + "</p>";
        $(this.el).html(person);
    }
});

这将会生成下面这样的 HTML 片段:

<article id="personOne" class="person" title="Albert Yu">
    <p> Albert Yu </p>
</article>

缓存化的 jQuery 对象

像上面的 HTML 代码,如果要使用 jQuery 操作它们,那就像这样:

$("#personOne").html();

当然,Backbone.js 提供了更好的选择:

$(this.el).html();

甚至更好:

this.$el.html();

$el 是 Backbone.js 为 el 生成的 jQuery 对象的缓存,使其可以反复使用而不用担心产生多个 jQuery 的实例对象。

内置的模板引擎(underscore template)

之前的 render 方法可不怎么优雅,好在 Backbone.js 内置了 Underscore.js 库,其中包含了一个简洁的模板引擎:

var PersonView = Backbone.View.extend({
    tagName: "article",
    id: "personOne",
    class: "person",
    attributes: {
        title: this.model.get("name")
    },

    template: _.template('<p><%= name %></p>'),

    render: function() {
        data = this.model.toJSON();
        $(this.el).html(template(data));
    }
});

Cool! 这样就好看多啦~

如果内置模板引擎不合你的胃口,你当然可以选用其他的方案,比如说:

视图事件

Backbone.js 能够监视数据对象的变化并为其注册事件及回调函数,当然对于视图元素也是一样的,并且由于视图对象为我们提供了页面作用域的控制,使得我们可以更简单地和作用域内的对象交互而不至于发生混乱。

继续扩展上面的例子:

var PersonView = Backbone.View.extend({
    tagName: "article",
    id: "personOne",
    class: "person",
    attributes: {
        title: this.model.get("name")
    },

    template: _.template('<p><%= name %></p>'),

    render: function() {
        data = this.model.toJSON();
        $(this.el).html(template(data));
    },
    
    events: {
        "mouseover" : "showMore",
        "click p"   : "greeting"
    },

    showMore: function() {...},
    greeting: function() {...}
});

视图事件的语法结构是:"<event> <selector>: <method>",解读一下上面注册的两个事件:

  1. mouseover 事件被注册在作用域内的顶级标签上(即 el,也就是本例中的 <article></article>),于是 showMore 方法会在鼠标经过 this.el 标签的时候触发执行;

  2. 类似的,click 事件被注册在 <p></p> 标签上……等一下,哪一个 p 标签?

OK,这就是作用域的体现了,事实上 Backbone.js 执行此事件调用时的后台代码差不多是这样的:

$(this.el).delegate('p', 'click', greeting);

注:现在的 jQuery 早已经全面采用 on 方法来执行事件委托调用了,这个例子只是为了强调这是一种委托调用而已。

我们可以看到,事件的委托方法(delegate)执行在 this.$el 这个 jQuery 对象上,因此 p 就是被包裹在 this.el 之内的那一个;事实上你可以用完全兼容的 CSS 选择符来指定你要的元素,这和使用 jQuery 是一样的!只不过 Backbone.js 事先帮你选择了一个上级作用域,使得筛选工作变得更简单,更具针对性。

进阶:模型与视图的交互

是时候了解些复杂的东东了!首先我们根据目前所学,知道了 Backbone.js 的(部分)内部构造:

服务器 <=(获取)模型(数据)=> 视图(渲染)=> DOM

这个过程当然也可以反向回来形成一个回圈。

视图的变化通知模型

我们先让视图能够接受用户交互并产生变化

var PersonView = Backbone.View.extend({
    // ...
    input: _.template('<input type="text"><%= name %></input>'),
    submit: _.template('<button type="submit">Change Name</button>'),

    render: function() {
        data = this.model.toJSON();
        $(this.el).html(input(data)).html(submit);
    }
});

现在咱们可以改名了,问题是模型如何知道数据发生了改变呢?这就需要视图通过事件通知它了:

var PersonView = Backbone.View.extend({
    // ...
    events: {
        "submit button": "updateName"
    }

    updateName: function() {
        newName = $(this).val(); // this = button!

        if (newName !== this.model.get('name')) {
            this.model.set({name: newName});
        } else {
            return;     
        }
    }
});

Well… 这么做的确能行,但问题是应该属于 Model 处理的逻辑现在散落在 View 当中,这样不太妥呀!没关系,我们重构一下,这一次 View 的工作仅仅是通知:

var PersonView = Backbone.View.extend({
    // ...
    events: {
        "submit button": "updateName"
    }

    updateName: function() {
        newName = $(this).val();
        this.model.updateName(newName);
    }
});

var Person = Backbone.Model.extend({
    // ...
    updateName: function(newName) {
        if (newName !== this.get('name')) {
            this.set({name: newName});
            this.save(); // 通知服务器保存
        } else {
            return;     
        }
    }
});

就像这样,我们通过参数传递把改变的值转交给 Model,再由 Model 做进一步的处理就是了。

现在,回路模型就像这样:

服务器 <=(更新)模型(处理)<=(通知)视图 <=(用户交互)DOM

不过事情还没有结束:如果模型的数据变化了,视图又如何知道呢?你或许立刻想到可以在视图完成通知之后立刻执行 render 方法:

var PersonView = Backbone.View.extend({
    // ...
    updateName: function() {
        newName = $(this).val();
        this.model.updateName(newName);
        this.render();
    }
});

嗯,好主意……不过它并不总是有用的,因为模型的值很有可能会在别处发生改变,比如在另外一个视图里。那么,要如何通知指定的视图响应模型数据的变化呢?

这件事情需要在视图实例化的时候就去做,让视图去监听模型的变化吧:

var PersonView = Backbone.View.extend({
    // ... 省略其他的代码,添加以下初始化代码
    initialize: function() {
        this.listenTo(this.model, "change", this.render);
        // this.model.on("change", this.render, this);
    }
});

被注释掉的那一行是以前的另外一种写法,也能达到目的,但是稍微难以理解一点——最后一个参数传递的是视图实例对象本身。

数据集合

收集多个模型数据

当模型的实例越来越多的时候,为了方便的处理它们,我们通常会想到用数组把它们集中起来。Backbone.js 提供了一个 Collection 模块来帮助我们简化这些事情:

var People = Backbone.Collection.extend({
    model: person // 之前已经生成的模型实例
});

看起来挺像 Model 的,不过这一次获得的数据都是数组了。我们需要用处理数组的办法来处理集合里的数据(当然,Backbone.js 提供了许多内置方法):

var people = new.People();

people.add([
    { name: "John Doe", id: 1 },
    { name: "Jane Smith", id: 2 }
]);

people.length // => 2

people.get(2) // => { name: "Jane Smith", id: 2 }

people.at(0) // => { name: "John Doe", id: 1 }

如果数据来自于服务器,那就需要指明 url

var People = Backbone.Collection.extend({
    model: Person,
    url: '/people'
});

var people = new.People();
people.fetch(); // 可以批量获取了

people.add(person1);

people.reset(); // reset 方法可以重置发生了变化的集合实例,确保里面的数据是完整的

集合事件

集合事件的注册及使用和模型非常相似,只不过集合多了几个专属的事件,这些差别可以通过查阅文档来获知。

我们可以在触发事件的时候传递 silent 参数进去,阻止事件回调函数的执行:

people.on("reset", function() {
    alert("You have " + this.length + " people now!");
});

people.fetch(); // will alert
people.fetch({silent: true}); // will not alert

集合视图

集合视图的故事也没什么特别之处,只不过这一次视图里要处理的是一组数据,所以免不了要渲染两个层级,一层是集合,一层是遍历集合里的模型:

var PeopleView = Backbone.View.extend({
    render: function() { // 集合视图的 render 当然要渲染整个集合了
        this.collection.forEach(this.addPerson, this)
    },

    addPerson: function(person) { // 这还是老的模型视图那一套
        var personView = new PersonView({model: person});
        this.$el.append(personView.render().el);
    }
});

var peopleView = PeopleView.new({
    collection: people; // people 是之前定义过的集合实例
})

监听集合的变化

Same old stories...

var PeopleView = Backbone.View.extend({
    initialize: {
        this.collection.on("change", this.render, this), // 集合发生了变化,比如 reset, fetch
        this.collection.on("add", this.addPerson, this), // 集合里添加了新的数据
        this.model.on("hide", this.removePerson, this)   // 集合里某一个数据被移除了
    },

    render: function() {
        this.collection.forEach(this.addPerson, this)
    },

    addPerson: function(person) {…},
    
    removePerson: function() {
        this.$el.remove();
    }
});

...but not always as old as

前两个事件处理都不难理解,关键是第三个:

  1. 集合中的某个数据被移除了(注意,不是这个数据在服务器那里删除了,而是把它从集合中移出去了),这件事情发生在 collection.remove(item) 的时候,按道理我们应该监听 collection 的;
  2. 然而在视图里真正发生改变的仅仅是那个数据,而不是全部集合,换句话说,视图里执行回调函数接受的 this 是那个数据,而不是整个集合;
  3. 这就是为什么用 this.model.on 而不是 this.collection.on 的原因。但是——数据是被 collection.remove(item) 移出,而不是它自身的方法调用,我们监听 this.model.on 要怎么知道它确切发生了呢?

OK,这是一件稍微复杂一点的事情,在 collection 内部事实上发生了以下的变化:

var People = Backbone.Collection.extend({
    initialize: {
        this.on("remove", this.hideModel)
    },

    hideModel: function(model) {
        model.trigger("hide"); // 我们让 model 触发自定义事件 hide
    }
});

就这样,在视图里我们不监听 collection 的 remove 事件(因为我们不打算改变 collection),当 collection.remove(item) 发生的时候,collection 内部会让那个被移除的 item 触发它自己的自定义事件 hide。于是,我们就可以在视图里监听这个自定义事件,一旦监听到就说明 collection.remove(item) 确实发生了,然后就把 item 给 remove 掉。

让 App 飞~

So far so good, 但是我们始终在一页里面动作,这对用户来讲是远远不够的。如果 url 发生了改变会怎样?

在浏览器的世界里,使用 javascript 来控制 url 的历史记录有两种主要方式:

Hash mark(#people/1)

当有这样的链接存在时:

<a href="#people/1">Albert Yu</a>

点击后,浏览器的 url 会是这个样子:

http://www.example.com/#people/1

于是,我们可以获得用户的 url 历史记录并控制它们。但是,这样并不够好,我们真正想要的是这样的 url:

http://www.example.com/people/1

只不过若是没有任何处理的话,访问这样的 url 会造成浏览器刷新,所有数据重新载入,这就体现不出我们使用现代 javascript 技术的优势了。

Backbone.js 可以处理 Hash mark 的 url 历史记录,但我们重点要讲的是另外一种方式,来自新的 HTML5 API

HTML5 Push State API

使用 Push State,我们可以截取常规的 url 链接,然后专用 javascript 去处理它们,而不是让整个浏览器刷新。要启用对 Push State 的支持,我们需要调用 Backbone.js 的 history api:

Backbone.history.start({pushState: true});

要截取 url 的变化转交由 Backbone.js 来处理,我们就要注册 routes:

var App = Backbone.Router.extend({
    routes: {
        "people"                : "index", // /people
        "people/:id"            : "show", // people/1
        "help/:subject/p:page"  : "help" // help/intro/p3
    },

    index: function() {
        ...
    },

    show: function(id) {
        ...
    },

    help: function(subject, page) {
        ...
    }
});

那些忽略了内部实现的方法,事实上就是之前我们所学到的一切,这要根据你的应用程序来定。比如说 index 方法,我们就是想要获取 people collection ,然后把它们都显示出来,于是:

var App = Backbone.Router.extend({
    ...

    index: function() {
        var people = new People();
        people.fetch();
        var peopleView = new PeopleView({collection: people});
        $("#app").append(peopleView.render().el);
    },

    ...
});

或者,我们可以直接初始化集合与视图的实例:

var App = Backbone.Router.extend({
    initialize: function() {
        this.people = new People();
        this.peopleView = new PeopleView({collection: this.people});
        $("#app").append(this.peopleView.el);
    },

    index: function() {
        this.people.fetch();
    },

    ...
});

Wrap up!

重新组织一下我们应用的入口吧,与其创建一堆类然后再分别实例化,我们完全可以一起做了:

var App = new (Backbone.Router.extend({
    initialize: function() {
        this.people = new People();
        this.peopleView = new PeopleView({collection: this.people});
        $("#app").append(this.peopleView.el);
    },

    index: function() {
        this.people.fetch();
    },

    ...

    start: function() { // 封装一下 Backbone.history API
        Backbone.history.start({pushState: true});
    }
}));

// 于是,我们可以这样初始化整个应用程序

$(function() { App.start(); });

最后,一休哥说了:“就到这里,再见吧!”