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

caige 发布于2019-08-21 10:26 / 1074人阅读

摘要：数据更新的时候，支持多事件和自定义事件。然后使用两个事件和的自定义事件。我们将使用别名函数。是为了模拟从服务器获取响应的时间。在它内部里面，使用和返回模型属性把选中的模型赋值给当前视图的模型。

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

事件绑定

在我们浏览网页的时候，获取数据并不是一下只就全部获取到的，为了创建一个更好的用户体验，就来模拟一个加载（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);
}

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

当模型改变时候调用render()函数

当事件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，如果可以看到加载的图片的话，就证明成功啦！

最后附上完整的代码

backbone日常练习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85520.html

Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
Backbone.js学习笔记（二）细说MVC

摘要：因为是一条数据记录，也就是说，相当于是一个数据集。通常我们需要重载函数，声明，以及通过或为视图指定根元素。通过绑定视图的函数到模型的事件模型数据会即时的显示在中。实例属性参数以及类属性参数会被直接注册到集合的构造函数。对于初学backbone.js的同学可以先参考我这篇文章：Backbone.js学习笔记（一） Backbone源码结构 showImg(https://segme...

taoszu 2019-08-21 10:29 评论0 收藏0
2017年前端流行的数百个javascript库，你会几个？

摘要：有数百个免费的库出来，为应用程序选择正确的框架变得非常困难。是流行的驱动技术之一，由于年创建。在这三个块中，有几个暴露低层接口的绑定。反应由，和许多开发人员和个人的社区维护。诞生于年，是一个轻量级的框架。有数百个免费的JS库出来，为应用程序选择正确的JavaScript框架变得非常困难。一些开发商最终会抛弃，而其他开发者则迅速发展，并得到广泛采用。许多开发人员只知道像jQuery和R...

CoXie 2019-08-20 15:29 评论0 收藏0
带你读Backbone源码解读之Events实现

摘要：接受个参数，包括事件的名称，回调函数和回调函数执行的上下文环境。保留回调函数在数组中取出对应的以及中的函数。当然，你同样可以在绑定的回调函数执行前手动通过将其移除。 Backbone源码解读 Backbone在流行的前端框架中是最轻量级的一个，全部代码实现一共只有1831行1。从前端的入门再到Titanium，我虽然几次和Backbone打交道但是却对它的结构知之甚少，也促成了我想读...

AndroidTraveler 2019-08-21 10:28 评论0 收藏0
backbone源码解读

摘要：个人认为，读懂老牌框架的源代码比会用流行框架的要有用的多。另外，源代码中所有的以开头的方法，可以认为是私有方法，是没有必要直接使用的，也不建议用户覆盖。写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令...

Kross 2019-08-20 14:08 评论0 收藏0