TodoMVC中的Backbone+MarionetteJS+RequireJS例子源碼分析之二 數據處理

當咱們使用jQuery時大部分時間是聚焦於Dom節點的處理，給Dom節點綁定事件等等；前端mvc框架backbone則如何呢？

M－Model,Collection等，是聚焦於數據的處理，它把與後臺數據的交互封裝好，而後咱們使用時能夠給數據的變化綁定事件，能夠相應的去更新到Dom(這裏是View)

V－View(Marionette擴展了，有ItemView,CollectionView,CompositeView和LayoutView)，則聚焦於處理Dom節點

C－Controller:  Router(Marionette擴展了，有Controller) 用於解釋URL的路由，監聽URL變化而後，取相應的Model並更新相應的View

總的來講使得之前要編寫複雜的數據與Dom節點交互代碼變得簡單，可配置，明瞭。

下面是兩個數據處理的模塊

js/models/Todo.js

/*global define */ define([ 'backbone', 'localStorage'//backbone localStorage插件塊，用來提供Restful API，只不過數據是以html5的local storage形式存儲，當後臺使用
], function (Backbone) { 'use strict'; return Backbone.Model.extend({ localStorage: new Backbone.LocalStorage('todos-backbone'),//用於訪問local storage　能夠不用理它
 defaults: {//todo model默認的數據形式
            title: '', completed: false, created: 0 }, initialize: function () {//model初始化時若是是新的則更新到後臺數據庫（這裏是新增到local storage）
            if (this.isNew()) { this.set('created', Date.now()); } }, toggle: function () {//todo model向外提供的改狀態(completed:true/false)的函數，能夠看到在TodoItemView.js會引用此函數
            return this.set('completed', !this.get('completed')); } }); });

js/collections/TodoList.js

/*global define */ define([ 'backbone', 'models/Todo', 'localStorage' ], function (Backbone, Todo) { 'use strict'; return Backbone.Collection.extend({ model: Todo,//collection數據集的個體model是Todo
 localStorage: new Backbone.LocalStorage('todos-backbone'), getCompleted: function () {//TodoList collection向外提供獲取completed爲true的數據集的函數，能夠看到在CompletedCount.js會引用此函數
            return this.where({completed: true}); }, getActive: function () {//TodoList collection向外提供獲取completed爲false的數據集的函數，能夠看到在ActiveCount.js會引用此函數
            return this.where({completed: false}); }, comparator: 'created'//model的排序是按created來排序，也能夠調用collection.sort([options])來強制排序
 }); });