Backbone.js 使用 Collection

在前面我们的 Backbone.js 用上了 Model, 但绝大数的情况下我们处理的都是一批的 Model 数据列表,所以需要有一个 Collection 来容纳 Model, 就像 Java 里最常用的 List。

声明 Collection 时需要指定他处理的 Model 类型,也就是个泛型参数,如我们这样定义 Collection:

然后就是往 Collection 中如何填充 Model 实例,有好多种,这里只演示最直接的方式。还 add, fetch, 及对 Collection 排序, 遍历等各种操作。 阅读全文 >>

Backbone.js 中使用 Model

前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了。现在来学习怎么创建自己的 Model 类,并简单的使用。Backbone.js 中 Model 会涉及到很多的概念,如 Model 的初始化,默认值,属性的读写,属性值改变的监听,数据渲染,校验,以及与服务端的数据同步等。

本文不打算讲前面大部分的内容,最初思考的一个脉络是怎么把 Model 引入进来,所以线索会是 建立 Model 类 -> 初始化 Model 实例 -> 设置值 -> 渲染到页面,其余 Model 特性分别再深入。

直观地能想到的 JavaScript 的 Model 是一个 JSON 对象,差不多,不过 Backbone 赋予 Model 默认属性,只能通过 getter/setter 方法来访问 Model 中的属性值,不能直接用点操作符,相当于 Backbone 的属性是私有的。 阅读全文 >>

Backbone.js 的 View 中定义事件

使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...})。幸运的是 Backbone 让我们在 View 中定义事件变得更为简单和集中,只要设置 View 的 events 属性,配置 事件,元素以及相应的处理方法,基本模式如下:

    events: {
        "click button": "event_handler",
        "focus #name": "event_handler"
    },
    event_handler: function( event ){
        alert(event.target.id);
    }

格式是 "事件 选择器": "事件处理函数名", 奇怪为什么这里不是使用事件处理函数名的引用,也就是不能写成下面两种方式: 阅读全文 >>

Backbone.js 使用模板

前面一篇 Backbone.js HelloWorld,应用起步 只是让 Backbone 跑起来,实际的应用中会使用到模板,Model 等,而模板又是进阶的基础。所以这里介绍在 View 中使用模板,以及如何向模板填充值,模板可以用字符串,或是用 <script type="text/template"> 声明的内容。使用 <%= %><%- %> 来声明变量输出的占位符。

Backbone 的模板要用到的是 underscore.js 库, 要深入了解 Unserscore 就看官方的 Underscore.js 的文档,Underscore 的 template 方法的原型如下:

_.template(templateString, [data], [settings])

下面是些完整的例子

一: 使用字符串模板

阅读全文 >>

Backbone.js HelloWorld,应用起步

Backbone 是一个 JavaScript 框架,可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化,所涉及到的概念有  View, Event, Model, Collection 和 Router,所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相,因此第一个例子只需用到 View,其他的玩艺暂且搁置。

Backbone 强依赖于 Underscore,jQuery 是可选的,不过为操作 DOM 方便一般都会引用到 jQuery。

最简单的例子,分两步走:

1. Backbone.View.extend(obj) 创建一个 View 类型
2. 创建上一步得到的 View 的实例,实例化时将会调用前一步 obj.initialize() 方法

上代码(为方便起见,所有 JS 脚本都从公网上加载): 阅读全文 >>