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();

　　輸出內容為：（此處假裝在頁面上^_^）