Backbone.js学习笔记：图书案例-事件绑定

前言： 我们继续使用上一次写的图书案例，在基础上面进行改进！

事件绑定

在我们浏览网页的时候，获取数据并不是一下只就全部获取到的，为了创建一个更好的用户体验，就来模拟一个加载（Spinner）的图片来告诉用户正在获取数据中！

当用户在浏览详细视图（books/:BookName），只需要调用加载数据的方法。然后，因为设置了正确的监听器，当接受到新的数据的时候，视图就会自动更新。数据更新的时候，Backbone支持多事件和自定义事件。

改变路由程序里面的代码：

// 渲染Books页面
loadBook: function (bookName){
    this.bookView.loadBook(bookName);
}

除了bookView类，其他都不会改变。添加构造函数或者initialize方法，initialize方法是Backbone里面的一个特殊的字符属性。每个实例初始化的时候都会调用这个属性对应的方法。

然后使用两个事件——change和spinner的自定义事件。我们将使用on()(别名bind)函数。

initialize: function (){
    this.model = new (Backbone.Model.extend({}));
    this.model.bind('change', this.render, this);
    this.bind('spinner', this.showSpinner, this);
}

上面的代码做了两件简单的事情：

1. 当模型改变时候调用render()函数
2. 当事件spinner触发时调用showSpinner()函数

然后spinner怎么办呢？，那就用一个简单的gif图片把！在bookView里创建一个新的属性：

templateSpinner: ''

spinner图片（上网找一大堆）：

接着回到一开始那个loadBook函数里面，继续写代码：

loadBook: function (bookName){
    this.trigger('spinner');
    // 出现加载图片
    var me = this;
    // 需要在闭包访问this
    setTimeout(function (){
        // 模拟从服务器获取数据要的时间
        me.model.set(me.collection.where({
            name: bookName
        })[0].attributes);
    }, 1000);
}

里面触发了spinner事件，还有为了解决作用域的问题，需要在闭包里面访问this。

setTimerout是为了模拟从服务器获取响应的时间。在它内部里面，使用model.set()和model.attributes(返回模型属性)把选中的模型赋值给当前视图的模型。

最后把render函数里面多余的代码去掉，实现showSpinner函数：

render: function (bookName){
    var bookHtml = this.template(this.model);
    $('body').html(bookHtml);
},
showSpinner: function (){
    $('body').html(this.templateSpinner);
}

让后打开浏览器访问index.html#books/book1，如果可以看到加载的图片的话，就证明成功啦！

最后附上完整的代码

bg