首页 > 代码库 > 2014/08/04 – Backbonejs
2014/08/04 – Backbonejs
[来自: 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。