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（乌克兰）

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

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

     ...
     <div id="hello"></div>
     <div id="renderHere"></div>
     <script src="js/main.js"></script>
     ...

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

　　main.js =>

   　　/**
      * 模块声明方式
      */
     var InvoiceModel = Backbone.Model.extend({
         default: {
             price: 0,
             quantity: 0
         },
         calculateAmount: function() {
             return this.get('price') * this.get('quantity');
         }
     })

　　赋值 =>

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

　　创建视图 =>

     /**
      * 视图View
      */
     var PreviewInvoiceItemModel = Backbone.View.extend({
         temlate: _.template('\
         price : <%= price %>.\
         quantity : <%= quantity %>.\
         Amount : <%= amount %> .\
         '),
         render: function() {
             var html = this.temlate({
                 price: this.model.get('price'),
                 quantity: this.model.get('quantity'),
                 amount: this.model.calculateAmount()
             })
             $(this.el).html(html);
         }
     })

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

　　视图引用模块 =>

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

　　渲染 =>

     previewInvoiceItemModel.render();

　　或者

     var invoiceItemModel2 = new InvoiceModel();
     invoiceItemModel2.set({ price: 10, quantity: 20 });
     var previewInvoiceItemModel2 = new PreviewInvoiceItemModel({
         model: invoiceItemModel2,
         el: '#renderHere'
     })
     previewInvoiceItemModel2.render();

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

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

　　price : 10. quantity : 20. Amount : 200 

 

　　此处待承接下文...