[来自: Backbone.js 开发秘笈 第1章]
各种模型实际上是通过扩展其基类 Backbone.Model 实现的。同理，定义的集合是靠扩展其基类 Backbone.Collection 而实现的。
控制器的功能被分散实现在 Backbone.Router 和 Backbone.View 当中。
路由器负责处理 URL 的变化，并且委派一个视图来继续处理应用。路由器（异步）获取模型后，随即触发一个视图的更新操作。
视图负责监听 DOM 事件。它要么对模型进行更新，要么通过路由器转移到应用的其他部分。
Backbone 依赖 Underscore ， JQuery 或 Zepto 。
Backbone.Router 只是用来定义路由以及相关的回调函数，而其他所有的重要工作则全部都由 Backbone.history 完成。作为窗口中的全局路由器， Backbone.history 负责处理 hashchange 或者 pushState 事件、匹配到合适的路由以及触发回调函数。你永远不用为（ Backbone.history ）这个全局路由器创建一个实例，因为到你使用路由器时， Backbone 会自动创建。
Backbonejs 插件: https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title></title>
<script src="lib/jquery.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
index.html
(function ($) {
$(function () {
/* define */
//Mode--------------------------------------------------
var InvoiceItemMode = Backbone.Model.extend({
defaults: {
price: 0,
quantity: 0
},
calculateAmount: function () {
return this.get(‘price‘) * this.get(‘quantity‘);
}
});
//View---------------------------------------------------
var PreviewInvoiceItemView = Backbone.View.extend({
template: _.template(‘Price: <%= price %>. Quantity: <%= quantity %>. Amount: <%= amount %>.‘),
render: function () {
var html = this.template({
price: this.model.get(‘price‘),
quantity: this.model.get(‘quantity‘),
amount: this.model.calculateAmount()
});
$(this.el).html(html);
}
});
//Router-------------------------------------------------
var Workspace = Backbone.Router.extend({
routes: {
‘‘: ‘invoiceList‘,
‘invoice‘: ‘invoiceList‘
},
invoiceList: function () {
var invoiceListView = new PreviewInvoiceItemView({
model: new InvoiceItemMode({
price: 2,
quantity: 3
}),
el: ‘body‘
});
invoiceListView.render();
}
});
/* apply */
//instance-----------------------------------------------
/*
var invoiceItemMode = new InvoiceItemMode({
price: 2,
quantity: 3
});
var previewInvoiceItemView = new PreviewInvoiceItemView({
model: invoiceItemMode,
el: ‘body‘
});
*/
//execute------------------------------------------------
//previewInvoiceItemView.render();
new Workspace();
Backbone.history.start();
});
})(jQuery);
main.js
2014/08/04 – Backbonejs,布布扣,bubuko.com
时间： 2024-12-25 11:21:11