TodoMVCにおけるBackbone+MarionetteJS+RequireJS例のソースコード解析の二データ処理

jQueryを使用する場合、ほとんどの時間はDomノードの処理に焦点を当て、Domノードにイベントをバインドするなどします.フロントエンドmvcフレームbackboneはどうですか?
M-Model、Collectionなどは、バックグラウンドデータとのインタラクションをカプセル化したデータ処理に焦点を当て、使用時にデータの変化にイベントをバインドし、Dom(ここではView)に更新することができます.
V-View(Marionette拡張、ItemView、CollectionView、ComponentView、LayoutView)がある場合、Domノードの処理に焦点を当てます.
C-Controller:Router(Marionette拡張、Controllerあり)URLのルーティングを解釈し、URLの変化を傍受した後、対応するModelを取り、対応するViewを更新する
総じて言えば、以前は複雑なデータを記述してDomノードとインタラクティブなコードを簡単にすることができ、構成することができ、明らかになった.
次は2つのデータ処理モジュールです
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])     
    });
});