backbone.js and mvw 101
DESCRIPTION
Introducing MVW and Backbone.js at 101 level.TRANSCRIPT
![Page 2: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/2.jpg)
為什麼需要 Backbone.js ?
Mokoversity
![Page 3: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/3.jpg)
Single Page Web Apps
Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page-applications-and-apis/
![Page 4: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/4.jpg)
Through a RESTful API
Source: http://cyberasylum.janithw.com/tag/single-paged-applications/
![Page 5: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/5.jpg)
MVC for Client
http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/
Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。
![Page 6: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/6.jpg)
SPAs and RESTful
http://backbonetutorials.com/why-would-you-use-backbone/
It’s difficult to build Single Page Applications that by simply using jQuery or MooTools. They don’t have formal structure.
The browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.
Single-page web apps are the future. Backbone.js is essentially MVC for the client and allows you to make your code modular.
![Page 7: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/7.jpg)
URL Router
Source: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx
![Page 8: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/8.jpg)
MVC, MVP 與 MVVM 觀念介紹
Mokoversity
![Page 9: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/9.jpg)
URL Router
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
![Page 10: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/10.jpg)
MVVM
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
![Page 11: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/11.jpg)
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
![Page 12: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/12.jpg)
MVC vs MVVM
MVC MVVM
寫程式 不⽤用寫程式
Template + Control Logic
Template + Data Binding
![Page 13: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/13.jpg)
MVC vs MVP
MVC MVP
Controller 處理 User Inputs
View 處理 User Inputs
Controller uses Presentation
Model
Controller is Presentation
Model
![Page 14: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/14.jpg)
MVVM
Source: http://mvcsharp.org/Overview/Default.aspx
![Page 15: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/15.jpg)
MV* - Whatever
Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design-pattern-in-dnn.aspx
寫的好就是 MVP,寫不好就是 MVC;神⼈人級寫出來就是 MVVM。連 MVC 都沒有的是幼幼班。
![Page 16: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/16.jpg)
TicTacToe
Mokoversity
![Page 17: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/17.jpg)
MVC 初體驗• 將以⼀一個 TicTacToe 遊戲的實作:
• 了解 MVC 的重點性
• MVC 的基本實作觀念
![Page 18: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/18.jpg)
REST 與 JSON• 將 REST API 回傳的 JSON 資料,轉換成
HTML5 標籤,並顯⽰示在 UI 上
• 使⽤用 jQuery AJAX 呼叫 REST API 是⽐比較 Dirty 的⽅方式
• 須導⼊入 MVC 的框架
![Page 19: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/19.jpg)
Key-Value Pairs• JSON 資料格式
• 將 JSON「套⽤用」到 Template
{ "name": "jollen"}
![Page 20: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/20.jpg)
使⽤用 AJAX 呼叫 REST API// 等候 HTML ⽂文件完成載⼊入!$(document).ready(function(){!! initSubmitForm();!});!!var initSubmitForm = function() {! // 使⽤用 ajax() 來呼叫 REST API! $.ajax({! url: 'http://localhost:3000/discussion/latest/3',! type: "GET",! dataType: "json",! complete: function(data, textStatus, jqXHR) {! console.log(textStatus);! },! success: function (data, textStatus, jqXHR) {! console.log(data);! }! });! ! return false;!};
![Page 21: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/21.jpg)
沒有 MVC 架構• 典型沒有 MVC 架構的寫法
var dataMapping = function(data) {! for (i = 0; i < data.length; i++) {! var htmlCode = ! "<div class=\"alert alert-dismissable alert-info\">"! + " <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button>"! + " <h4>jollen</h4>"! + data[i].message! +"</div>";!! $('#message').append(htmlCode);! }!}
![Page 22: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/22.jpg)
關於 RESTful• 現代的 Web App 開發,以 REST API 的⽅方式整合 Client(Device)與 Server
• RESTful 是 Web Service 主流架構
• RESTful 易於 Web Service 與不同裝置的整合,例如:Desktop、Phone、Tablet 與 TV 等
![Page 23: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/23.jpg)
安裝 Underscore 與 Backbone• Step 1:安裝 Underscore 與 Backbone
• http://underscorejs.org/underscore-min.js
• http://backbonejs.org/backbone-min.js
• 存放⾄至 nodejs-chat 專案的 client/javascripts/ ⺫⽬目錄下
• Backbone 必須與 Underscore 搭配使⽤用。
![Page 24: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/24.jpg)
建⽴立主要⾴頁⾯面• Step 2:修改 chat.html
• 順序不能改變,先引⼊入 Underscore 後,再引⼊入 Backbone
• Backbone 是⼀一個 MVC 框架,其中 View 的部份由 Underscore ⽀支援
<script type='text/javascript' src="javascripts/underscore-min.js"></script>!<script type='text/javascript' src="javascripts/backbone-min.js"></script>
![Page 25: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/25.jpg)
撰寫基本的 Backbone 框架• Step 3:重新撰寫 client/javascripts/app.js
/**! * SETUP! **/! var app = app || {};!!/**! * MODELS! **/!!!/**! * VIEWS! **/! app.MessageView = Backbone.View.extend({! events: {! },! });!!/**! * BOOTUP! **/! $(document).ready(function() {! app.messageView = new app.MessageView();! });
![Page 26: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/26.jpg)
Backbone 初體驗• Backbone 是⼀一個 MVC (MVW) 框架,⼀一開始先定義 Model 與 View
• Model 就是「表⽰示資料的模型」,也就是將會顯⽰示在畫⾯面上的資料
• View 的部份將負責處理 Template 與 Model 的對應,必須先了解 Key-Value Paris 觀念
• View 的部份,也負責處理控制的部份,例如:Button 的 click 事件
![Page 27: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/27.jpg)
Backbone 的事件處理• Step 4:Backbone.View 事件處理
• 為這個區塊加⼊入名字
! <div class="row" id="message-save">!! ! <div class="col-md-9">!! ! ! <input class="form-control" type="text" name="message">!! ! </div>!! ! <div class="col-md-3">!! ! ! <button class="btn btn-large btn-primary btn-message-save">送出</button>!! ! </div>!! </div>
![Page 28: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/28.jpg)
實作 Backbone 事件處理• 使⽤用 events 屬性
1 app.MessageView = Backbone.View.extend({!2 el: '#message-save',!3 events: {!4 'click .btn-message-save': 'save'!5 },!6 save: function() {!7 alert("Saving...");!8 }!9 });
![Page 29: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/29.jpg)
MV Whatever
Mokoversity
![Page 30: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/30.jpg)
Work with Front-End Developers
Use MVC, MVP and MVVM
Call REST API in Backbone way
Customizable CSS
CSS generation and minify
![Page 31: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/31.jpg)
Model, View and Control
Views and Templating Handlebars.js and Underscore’s template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
![Page 32: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/32.jpg)
Model, View and Control
Spine.js and Backbone.js
![Page 33: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/33.jpg)
Model, View and Control
manage the data for an application e.g. Backbone "collections"
![Page 34: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/34.jpg)
MPV Models, Views & Presenters
MVP is generally used most often in enterprise-level applications where it's necessary to reuse as much presentation logic as possible.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
![Page 35: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/35.jpg)
Model View ViewModelan architectural pattern based on MVC and MVP, !
which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behavior in an application.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
![Page 36: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/36.jpg)
View and Model
Mokoversity
![Page 37: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/37.jpg)
認識 View.$el• A cached jQuery object for the
view's element.
• ⼀一個 jQuery 物件
var message = $('input[name="message"]').val();
var message = this.$el.find('input[name="message"]').val();!
![Page 38: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/38.jpg)
認識 this 物件• this 是⼀一個物件,代表「這個 View」的意思
• this 為 Backbone.View 類別
![Page 39: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/39.jpg)
this.$el 與 $• 使⽤用 *this.$el* ⽽而不是直接使⽤用 *$* 物件
• 為了避免不必要的 DOM 操作
• 將把 *$.ajax* 的做法,以 Model 的⽅方式取代
![Page 40: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/40.jpg)
認識 Backbone.Model• Backbone.Model ⽤用來表⽰示(存放)資料
• ⼀一個「資料模型」的類別
![Page 41: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/41.jpg)
使⽤用 Backbone.Model• 修改 client/javascripts/app.js
1 app.Message = Backbone.Model.extend({ !2 defaults: {!3 success: false,!4 errors: [],!5 errfor: {},!6!7 message: 'No message yet.'!8 }!9 });
![Page 42: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/42.jpg)
使⽤用 Underscore• Frontend Template 系統
• 宣告 Template:
<script type='text/template' id='tmpl-message'>!! <div class="alert alert-dismissable alert-info">!! ! <button type="button" class="close" data-dismiss="alert" aria-hidden="true">!! ! ! ×</button>!! ! <h4>jollen</h4>!! ! <%= message %>!! </div>!</script>
![Page 43: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/43.jpg)
使⽤用 Underscore 注意事項• "type" 必須定義為 "text/template"
• 給予⼀一個名字,上述範例將 Template 命名為 "tmpl-message"
• 使⽤用 <%= *variable-name* => 來取⽤用變數值,變數名稱在上述的 Model 裡定義,Underscore 會將 Model 的變數與 Template 做對應,並且⽤用變數值取代
![Page 44: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/44.jpg)
Underscore 觀念⼩小結• ViewModel:這個對應關係就是 ViewModel 的觀念
• Key-Value Pairs:Model 裡的資料,要⽤用 Key-Value Pairs 的格式表⽰示,JSON 就是 Key-Value Pairs 的格式
• Template:將 Model 裡的資料,顯⽰示到畫⾯面上,是透過 Template,並且是由 Underscore 來完成
• Code Ignorance:如上,顯⽰示資料到畫⾯面上,不需要寫程式;對設計師來說,只要修改 Template 即可,不會有程式碼的困擾
![Page 45: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/45.jpg)
View 與 Controller• View 與 Controller 的 Binding
• Code Ignorance-ViewModel
1 initialize: function() {!2 this.model = new app.Message();!3 this.template = _.template($('#tmpl-message').html());!4!5 this.model.bind('change', this.render, this);!6 this.render();!7 }
![Page 46: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/46.jpg)
View Binding 說明• 實例化 View 時,constructor 與 initialize 會被叫
• 實作 initialize 函數來加⼊入 Model
• 將 Model 的實例化存放到 View.model 裡
![Page 47: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/47.jpg)
Backbone 與 Underscore• 在 Backbone.View 裡定義⼀一個 template 函數
• 採⽤用的 Template 系統是 Underscore
• 為 Backbone.View 定義想要使⽤用的 Template 系統
• 如何讓 Backbone.View 使⽤用 Underscore 做為 Template 系統呢?
• 將 Backbone.View.template 定義為 _.template() 即可
![Page 48: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/48.jpg)
使⽤用 Underscore• _ 是 Underscore 的物件
• Underscore 名稱的由來
• 將取得的 Template 傳給 *_.template* 即可
this.template = _.template($('#tmpl-message').html());
![Page 49: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/49.jpg)
實作 render() 函數• 在 View 裡實作 render() 函數
• render() 會將 Model 與 Template 做對應,對應後的結果就是⼀一份 HTML5 ⽂文件
render: function() {! var data = this.template(this.model.attributes);!! this.$el.find('#message').html(data);! return this;! },
![Page 50: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/50.jpg)
render() 實作說明• 先呼叫 this.template 函數,這個函數已經被定義為
Underscore Template 系統
• this.model.attributes 存放的是「Model State」
• Model State 就是 Model ⺫⽬目前所存放的資料;資料會以 JSON 的格式表⽰示。
• this.model.attributes 存放了 Model Data,並且是 JSON 格式
• 將 Data 交給 Template 系統去做 Data Mapping。這⾏行程式碼是 ViewModel 觀念的靈魂。
• 最後將 Template 系統處理好的 HTML5 ⽂文件,放到想顯⽰示的網⾴頁位置即可
![Page 51: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/51.jpg)
Invoke RESTful API
Mokoversity
![Page 52: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/52.jpg)
呼叫 REST API:AJAX ⽅方式 app.MessageView = Backbone.View.extend({! el: '#message-save',! events: {! 'click .btn-message-save': 'save'! },! save: function() {! var message = $('input[name="message"]').val();!! $.ajax({! url: '/discussion/' + message,! type: 'POST',! dataType: "json",! success: function (data, textStatus, jqXHR) {! alert("已儲存成功");! },! complete: function (data, textStatus, jqXHR) {! }! });! }! });
![Page 53: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/53.jpg)
關於 Backbone Data Model• Backbone.Model 除了表⽰示資料外,還提供各種處理模型
• 最重要的處理模型:manage changee
• ⼀一但 Model 裡的資料有變動(例如:新增、刪除等),就要重新做 "Data Mapping"
• Backbone Way 的處理⽅方式,是透過 Backbone.Model.fetch
![Page 54: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/54.jpg)
使⽤用 Backbone Data Model 的理由
• 使⽤用 *$.ajax() 來呼叫 REST API 雖然是可⾏行的做法,但是有⼀一個缺點:處理 Response data 的架構不夠嚴謹
• 使⽤用 *$.ajax() 來呼叫 REST API 時,是直接把 API 當做 *ajax() 的參數,這個做法有⼀一個缺點:API 與 Response data 是⼀一種⽐比較鬆散的關係
![Page 55: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/55.jpg)
Backbone Data Model 優點• 使⽤用 Model fetch 的⽅方式,讓 Response
data 的處理更嚴謹
• 使⽤用 Data model 的⽅方式,,讓 Data 與 API 偶和(Aggregation)在⼀一起
![Page 56: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/56.jpg)
使⽤用 Backbone.Model.fetch
this.model.fetch({! success: function(model, response, options) {! }!});
![Page 57: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/57.jpg)
修改 Model• Backbone.Model.fetch 根據 this.model 裡的 url 定義,來呼叫 REST API
app.Message = Backbone.Model.extend({! url: '/discussion/latest/5',! defaults: {! success: false,! errors: [],! errfor: {},!! message: 'No message yet.',! messages: []! }! });
![Page 58: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/58.jpg)
設定 Data Model• 呼叫 Backbone.Model.fetch 後,
Backbone 會幫我們呼叫 REST API,並且取得 Response data
• 成功取得 Response data,Backbone.Model.fetch 就會 Callback success 函數。
![Page 59: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/59.jpg)
關於 Data State 的變化• self.model.set 的意思是,將取得的
response data 儲存到 Data model裡
• 由於 Data model 有了變動,所以 Backbone 便會呼叫 render() 函數
• 在 render() 函數裡,再 Render 出新的內容
![Page 60: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/60.jpg)
觀念⼩小結• 透過 Data model 整合 REST API,以及
Response data
• 將 REST API 與 Response data 封裝成 Data model
• 在 Data model 變動時,重新 Render 畫⾯面
![Page 61: Backbone.js and MVW 101](https://reader034.vdocuments.net/reader034/viewer/2022052508/559e10ff1a28abb8158b462c/html5/thumbnails/61.jpg)
使⽤用 Backbone.Collection
app.PostCollection = Backbone.Collection.extend({!! model: app.Post!});!