BackboneJS and UnderscoreJS

　  介绍 来自API(backbone能做什么？)

　　当我们开发含有大量Javascript的web应用程序时，首先你需要做的事情之一便是停止向DOM对象附加数据。
　　通过复杂多变的jQuery选择符和回调函数很容易创建Javascript应用程序，包括在HTML UI，Javascript逻辑和数据之间保持同步，都不复杂。
　　但对富客户端应用来说，良好的架构通常是有很多益处的。

　　通过Backbone，你可以将数据呈现为 Models, 你可以对模型进行创建，验证和销毁，以及将它保存到服务器。
　　任何时候只要UI事件引起模型内的属性变化，模型会触发"change"事件；
　　所有显示模型数据的 Views 会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。
　　— 当模型改变了，视图便会自动变化。

　　某种意义上说，在用javaScript来创建web项目时，Backbone试图定义一组最小而高效的集合，
　　包括了数据结构（models（模型） 和 collections（集合））和用户接口（views（视图） 和 URLS）。
　　在web开发环境里，到处都是框架（帮你写好了一切），不过这些库需要你的网站在构建的时候符合该框架的样子，风格，默认的行为。
　　但是，Backbone还是作为一个工具，让你可以随心所欲的设计你的网站。

　　Why Backbone ？ 说实话我也不知道为什么想去研究它。选择有很多 Angular，React，Vue，Ember，Knockout，Spine，Meteor等等。。。

　　况且Backbone已经在web混了很久了。如果真的需要一个理由：可能是因为它短小精悍的身材被吸引吧！（手动滑稽）

　　By the way 我现在手头上有一本书 ： 『Backbone.js Cookbook』-Vadim Mirgorod（乌克兰）

　　磨叽半天 让我们开始吧！哈哈

　　首先引用 ，这里就用传统方法来认识吧：

1     ...
2     <div id="hello"></div>
3     <div id="renderHere"></div>
4     <script src="js/main.js"></script>
5     ...

　　此处太懒了 没写在文档加载完成函数里 直接放在文档底部啦...

　　main.js =>

 1   　　/**
 2      * 模块声明方式
 3      */
 6     var InvoiceModel = Backbone.Model.extend({
 7         default: {
 8             price: 0,
 9             quantity: 0
10         },
11         calculateAmount: function() {
12             return this.get('price') * this.get('quantity');
13         }
14     })

 　　赋值 =>

 var invoiceItemModel = new InvoiceModel({
        price: 2,
        quantity: 3
    })

　　创建视图 =>

 1     /**
 2      * 视图View
 3      */
 4     var PreviewInvoiceItemModel = Backbone.View.extend({
 5         temlate: _.template('\
 6         price : <%= price %>.\
 7         quantity : <%= quantity %>.\
 8         Amount : <%= amount %> .\
 9         '),
10         render: function() {
11             var html = this.temlate({
12                 price: this.model.get('price'),
13                 quantity: this.model.get('quantity'),
14                 amount: this.model.calculateAmount()
15             })
16             $(this.el).html(html);
17         }
18     })

　　这里用到了underscore里面的模板方法 更多详情移步API 中文版 英文版。

　　视图引用模块 =>

1     var previewInvoiceItemModel = new PreviewInvoiceItemModel({
2         model: invoiceItemModel,
3         el: '#renderHere'4     })

　　渲染 =>

1     previewInvoiceItemModel.render();

　　或者 

1     var invoiceItemModel2 = new InvoiceModel();
2     invoiceItemModel2.set({ price: 10, quantity: 20 });
3     var previewInvoiceItemModel2 = new PreviewInvoiceItemModel({
4         model: invoiceItemModel2,
5         el: '#renderHere'
6     })
7     previewInvoiceItemModel2.render();

　　输出内容为：（此处假装在页面上^_^）

　　price : 2. quantity : 3. Amount : 6 .

　　price : 10. quantity : 20. Amount : 200 

 

　　此处待承接下文...

转载于:https://www.cnblogs.com/lesealy/p/7270311.html