Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。
其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。
Backbone.Events(事件)
- on()
this.$el.on("click", ".J_adultCount", $.proxy(this.changeAdultNum, this));
- off()
// Removes just the `onChange` callback.
object.off("change", onChange);
// Removes all "change" callbacks.
object.off("change");
// Removes the `onChange` callback for all events.
object.off(null, onChange);
// Removes all callbacks for `context` for all events.
object.off(null, null, context);
// Removes all callbacks on `object`.
object.off();
trigger()
触发给定 event或用空格隔开的事件的回调函数。后续传入 trigger 的参数会传递到触发事件的回调函数里。once()
下次不在触发了,用这个方法listenTo()
使用这种形式的优点是:listenTo允许 object来跟踪这个特定事件,并且以后可以一次性全部移除它们。callback总是在object上下文环境中被调用
this.listenTo(this.model, 'change', this.render);
stopListening()
让 object 停止监听事件listenToOnce()
事件触发一次后callback将被移除
Backbone.Model(模型)
Models(模型)是任何Javascript应用的核心,包括数据交互及与其相关的大量逻辑: 转换、验证、计算属性和访问控制
var Sidebar = Backbone.Model.extend({
promptColor: function() {
var cssColor = prompt("Please enter a CSS color:");
this.set({color: cssColor});
}
});
window.sidebar = new Sidebar;
sidebar.on('change:color', function(model, color) {
$('#sidebar').css({background: color});
});
sidebar.set({color: 'white'});
sidebar.promptColor();
extend
要创建自己的 Model 类,你可以扩展 Backbone.Model 并提供实例 properties(属性) , 以及可选的可以直接注册到构造函数的classProperties(类属性)。constructor / initialize
当创建model实例时,可以传入 属性 (attributes)初始值,这些值会被 set (设置)到 model。 如果定义了 initialize 函数,该函数会在model创建后执行。get model.get(attribute)
从当前model中获取当前属性(attributes)值,比如: note.get("title")set model.set(attributes, [options])
如果任何一个属性改变了model的状态,在不传入 {silent: true} 选项参数的情况下,会触发 "change" 事件,更改特定属性的事件也会触发escape model.escape(attribute)
与 get 类似,只是返回的是HTML转义后版本的model属性值。如果从model插入数据到HTML,使用 escape 取数据可以避免 XSS 攻击。
var hacker = new Backbone.Model({
name: "<script>alert('xss')</script>"
});
hacker.get('name') ==> <script>alert('xss')</script>
hacker.escape('name') ==> <script>alert('xss')</script>
- has model.has(attribute)
属性值为非 null 或非 undefined 时返回 true。
if (note.has("title")) {
...
}
unset model.unset(attribute, [options])
从内部属性散列表中删除指定属性(attribute)。如果未设置 silent 选项,会触发 "change" 事件。clear model.clear([options])
从model中删除所有属性, 包括id属性。如果未设置 silent 选项,会触发 "change" 事件。id
id是model的特殊属性,可以是任意字符串(整型 id 或 UUID)。在属性中设置的 id 会被直接拷贝到model属性上。 我们可以从集合(collections)中通过 id 获取model,另外 id 通常用于生成model的 URLs。model.cid
model的特殊属性,cid 或客户 id 是当所有model创建时自动产生的唯一标识符attributes model.attributes
attributes 属性是包含模型状态的内部散列表 — 通常(但不一定)JSON对象的形式表示在服务器上模型数据 。changed model.changed
changed属性是一个包含所有属性的内部散列,自最后 set 已改变。
请不要直接更新 changed,因为它的状态是由set内部维护。defaults
defaults 散列(或函数)用于为模型指定默认属性。 创建模型实例时,任何未指定的属性会被设置为其默认值。
在 Javascript 中,对象是按引用传值的,因此如果包含一个对象作为默认值,它会被所有实例共享。可以定义 defaults为一个函数取代。toJSON model.toJSON([options])
返回一个模型的 attributes 浅拷贝副本的 JSON 字符串化形式。sync model.sync(method, model, [options])
使用 Backbone.sync 可以将一个模型的状态持续发送到服务器。 可以自定义行为覆盖。clone model.clone()
返回该模型的具有相同属性的新实例。isNew model.isNew()
模型是否已经保存到服务器。 如果模型尚无 id,则被视为新的。hasChanged model.hasChanged([attribute])
标识模型从上次 set 事件发生后是否改变过。
如果传入 attribute ,当指定属性改变后返回 true。previous model.previous(attribute)
在 "change" 事件发生的过程中,本方法可被用于获取已改变属性的旧值。previousAttributes model.previousAttributes()
返回模型的上一个属性的副本。一般用于获取模型的不同版本之间的区别,或者当发生错误时回滚模型状态。
Backbone.View(视图)
- extend Backbone.View.extend(properties, [classProperties])
开始创建自定义的视图类。 通常我们需要重载 render 函数,声明 events, 以及通过 tagName, className, 或 id 为视图指定根元素。
var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
...
}
});
直到运行时, 像tagName, id, className, el, 和 events这样的属性也可以被定义为一个函数,
el view.el
所有的视图都拥有一个 DOM 元素(el 属性),即使该元素仍未插入页面中去。$el view.$el
一个视图元素的缓存jQuery对象。 一个简单的引用,而不是重新包装的DOM元素。
Utility(实用功能)
- Backbone.$ Backbone.$ = $;
如果页面上有多个jQuery副本, 或者只是想告诉Backbone使用特定对象作为其DOM / Ajax库, 那么这个属性可以为您服务。 如果您正在使用CommonJS加载Backbone (例如,节点,组件,或browserify) 您必须手动设置该属性。
var Backbone.$ = require('jquery-1.9.0');
Backbone.Collection(集合)
extend Backbone.Collection.extend(properties, [classProperties])
通过扩展 Backbone.Collection 创建一个 Collection 类。实例属性参数 properties 以及 类属性参数 classProperties 会被直接注册到集合的构造函数。model collection.model
覆盖此属性来指定集合中包含的模型类。可以传入原始属性对象(和数组)来 add, create,和 reset,传入的属性会被自动转换为适合的模型类型。
var Library = Backbone.Collection.extend({
model: Book
});