1.维护的model是todo实例的列表，这样，我们对增加记录、删改某一条记录，都要重新渲染整个列表，这样，导致性能的拙劣行。当然，改进的方式是对每一个实例进行对应dom的绑定。
2.这里的View中，我们看到其中参杂了一些显示逻辑，显然，我提倡这样去做，而非在js中去控制业务逻辑。然而，我们在实际开发的过程当中，我们必然涉及到复杂的显示逻辑，这样，我们可以向之前所说的那样，利用单独编写显示逻辑helper，这与MVC的设计思想并不违背，确保高维护性及扩展性。
3.这里有关模型todos的业务逻辑，并没有严格抽象出来，而是写入对应的事件当中。

（1）MVC： 模型－视图－控制器(Model View Controller)
（2）MVP： 模型－视图－表现类（Model-View-Presenter）
（3）MVVM：模型－视图－视图模型（Model-View-ViewModel）

<script type="text/x-handlebars" data-template-name="todos">
    <section id="todoapp">
        <header id="header">
            <h1>todos</h1>
            <!-- 这里的action属性指定了对应的TodosController中的createTodo方法 -->
            {{input id="new-todo" type="text" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
        </header>
        {{#if length}}
            <section id="main">
                <ul id="todo-list">
                    {{#each filteredTodos itemController="todo"}}
                        <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
                            {{#if isEditing}}
                                {{edit-todo class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
                            {{else}}
                                {{input type="checkbox" class="toggle" checked=isCompleted}}
                                <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
                                <button {{action "removeTodo"}} class="destroy"></button>
                            {{/if}}
                            </li>
                    {{/each}}
                </ul>
                {{input type="checkbox" id="toggle-all" checked=allAreDone}}
            </section>
            <footer id="footer">
                <span id="todo-count">{{{remainingFormatted}}}</span>
                <ul id="filters">
                    <li>
                        {{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
                    </li>
                    <li>
                        {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
                    </li>
                    <li>
                        {{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
                    </li>
                </ul>
                {{#if hasCompleted}}
                    <button id="clear-completed" {{action "clearCompleted"}}>
                        Clear completed ({{completed}})
                    </button>
                {{/if}}
            </footer>
        {{/if}}
    </section>
    <footer id="info">
        <p>Double-click to edit a todo</p>
        <p>
            Created by
            <a href="http://github.com/tomdale">Tom Dale</a>,
            <a href="http://github.com/addyosmani">Addy Osmani</a>
        </p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
</script>

window.Todos = Ember.Application.create();

Todos.TodosController = Ember.ArrayController.extend({
    
    // 针对model集合的的交互在这里定义
    actions: {
        // 该方法的调用时在对应的dom节点中进行绑定，即对应模板中的下列语句
        // {{input id="new-todo" type="text" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
        createTodo: function() {
            var title, todo;

            title = this.get(‘newTitle‘).trim();
            if (!title) {
                return;
            }

            todo = {
                title: title,
                isCompleted: false
            };

            todo.save();

            this.set(‘newTitle‘, ‘‘);

        },
        /* ... */
    },
    
    // 以下主要定义显示逻辑
    remaining: function () {
        return this.filterProperty(‘isCompleted‘, false).get(‘length‘);
    }.property(‘@each.isCompleted‘),
    
    // 对应的dom调用时<span id="todo-count">{{{remainingFormatted}}}</span>
    remainingFormatted: function () {
        var remaining = this.get(‘remaining‘);
        var plural = remaining === 1 ? ‘item‘ : ‘items‘;
        return ‘<strong>%@</strong> %@ left‘.fmt(remaining, plural);
    }.property(‘remaining‘),
    /* ... */
    
});

Todos.TodoController = Ember.ObjectController.extend({

    isEditing: false,

    // 缓存title
    bufferedTitle: Ember.computed.oneWay(‘title‘),

    // 这里包含了对单条记录的所有增删改查的操作
    actions: {

        editTodo: function() {
            this.set(‘isEditing‘, true);
        },

        doneEditing: function() {
            var bufferedTitle = this.get(‘bufferedTitle‘).trim();

            if (Ember.isEmpty(bufferedTitle)) {
                Ember.run.debounce(this, this.send, ‘removeTodo‘, 0);
            } else {
                var todo = this.get(‘model‘);
                todo.set(‘title‘, bufferedTitle);
                todo.save();
            }

            this.set(‘bufferedTitle‘, bufferedTitle);
            this.set(‘isEditing‘, false);
        },

        cancelEditing: function() {
            this.set(‘bufferedTitle‘, this.get(‘title‘));
            this.set(‘Editing‘, false);
        },

        removeTodo: function() {
            var todo = this.get(‘model‘);

            todo.deleteRecord();
            todo.save();
        }
    }
});

<ul id="todo-list">
    {{#each filteredTodos itemController="todo"}}
        <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
            {{#if isEditing}}
                {{edit-todo class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
            {{else}}
                {{input type="checkbox" class="toggle" checked=isCompleted}}
                <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
                <button {{action "removeTodo"}} class="destroy"></button>
            {{/if}}
        </li>
    {{/each}}
</ul>

focus-out
insert-newline
escape-press
doubleClick

1. 程序的加载入口是rounter(即app.TemplatenameRouter)，来指定对应的model及controller。路由是负责显示模板，加载数据，以及管理应用程序的状态。
2. 程序的交互入口是controller，这里面包含两个类型的controller，一个是对应model集合的controller，一个是对应model的controller。两者各司其职，增加了代码的可维护性。

<script type="text/template" id="item-template">
    <div class="view">
        <input class="toggle" type="checkbox" <%= completed ? ‘checked‘ : ‘‘ %>>
        <label><%- title %></label>
        <button class="destroy"></button>
    </div>
    <input class="edit" value="<%- title %>">
</script>

<script type="text/template" id="stats-template">
    <span id="todo-count">
        <strong><%= remaining %></strong><%= remaining === 1 ? ‘item‘ : ‘items‘ %> left
    </span>
    <ul id="filters">
        <li>
            <a class="selected" href="#/">All</a>
        </li>
        <li>
            <a href="#/active">Active</a>
        </li>
        <li>
            <a href="#/completed">Completed</a>
        </li>
    </ul>
    <% if (completed) { %>
    <button id="clear-completed">Clear completed (<%= completed %>)</button>
    <% } %>
</script>

(function() {
    ‘use strict‘;

    var Todos = Backbone.Collection.extend({
        model: app.Todo,

        localStorage: new Backbone.LocalStorage(‘todos-backbone‘),

        // Filter down the list of all todo items that are finished.
        completed: function () {
            return this.filter(function (todo) {
                return todo.get(‘completed‘);
            });
        },

        // Filter down the list to only todo items that are still not finished.
        remaining: function () {
            return this.without.apply(this, this.completed());
        },

        nextOrder: function() {
            if (this.length === 0) {
                return 1;
            }
            return this.last().get(‘order‘) + 1;
        },

        //
        comparator: function(todo) {
            return todo.get(‘order‘);
        }
    });

    app.todos = new Todos();

})();

<section id="todoapp" data-bind="">
    <header id="header">
        <h1>todos</h1>
        <input id="new-todo" data-bind="value: current, valueUpdate: ‘afterkeydown‘, enterKey: add" placeholder="What needs to be done?" autofocus>
    </header>
    <section id="main" data-bind="visible: todos().length">
        <input id="toggle-all" data-bind="checked: allCompleted" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list" data-bind="foreach: filteredTodos">
            <li data-bind="css: { completed: completed, editing: editing }">
                <div class="view">
                    <input class="toggle" data-bind="checked: completed" type="checkbox">
                    <label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
                    <button class="destroy" data-bind="click: $root.remove"></button>
                </div>
                <input class="edit" data-bind="value: title, valueUpdate: ‘afterkeydown‘, enterKey: $root.saveEditing, escapeKey: $root.cancelEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">
            </li>
        </ul>
    </section>
    <footer id="footer" data-bind="visible: completedCount() || remainingCount()">
        <span id="todo-count">
            <strong data-bind="text: remainingCount">0</strong>
            <span data-bind="text: getLabel(remainingCount)"></span> left
        </span>
        <ul id="filters">
            <li>
                <a data-bind="css: { selected: showMode() == ‘all‘ }" href="#/all">All</a>
            </li>
            <li>
                <a data-bind="css: { selected: showMode() == ‘active‘ }" href="#/active">Active</a>
            </li>
            <li>
                <a data-bind="css: { selected: showMode() == ‘completed‘ }" href="#/completed">Completed</a>
            </li>
        </ul>
        <button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">
            Clear completed (<span data-bind="text: completedCount"></span>)
        </button>
    </footer>
</section>
<script src="js/base/base.js"></script>
<script src="js/lib/knockout.js"></script>
<script src="js/app.js"></script>

    // 针对view来创建ViewModel
    var ViewModel = function (todos) {
        
        // map array of passed in todos to an observableArray of Todo objects
        this.todos = ko.observableArray(todos.map(function (todo) {
            return new Todo(todo.title, todo.completed);
        }));

        // store the new todo value being entered
        this.current = ko.observable();

        this.showMode = ko.observable(‘all‘);

        this.filteredTodos = ko.computed(function () {
            switch (this.showMode()) {
            case ‘active‘:
                return this.todos().filter(function (todo) {
                    return !todo.completed();
                });
            case ‘completed‘:
                return this.todos().filter(function (todo) {
                    return todo.completed();
                });
            default:
                return this.todos();
            }
        }.bind(this));

        // add a new todo, when enter key is pressed
        this.add = function () {
            var current = this.current().trim();
            if (current) {
                this.todos.push(new Todo(current));
                this.current(‘‘);
            }
        };

        // remove a single todo
        this.remove = function (todo) {
            this.todos.remove(todo);
        }.bind(this);

        // remove all completed todos
        this.removeCompleted = function () {
            this.todos.remove(function (todo) {
                return todo.completed();
            });
        }.bind(this);

        // edit an item
        this.editItem = function (item) {
            item.editing(true);
            item.previousTitle = item.title();
        }.bind(this);

        // stop editing an item.  Remove the item, if it is now empty
        this.saveEditing = function (item) {
            item.editing(false);

            var title = item.title();
            var trimmedTitle = title.trim();

            // Observable value changes are not triggered if they‘re consisting of whitespaces only
            // Therefore we‘ve to compare untrimmed version with a trimmed one to chech whether anything changed
            // And if yes, we‘ve to set the new value manually
            if (title !== trimmedTitle) {
                item.title(trimmedTitle);
            }

            if (!trimmedTitle) {
                this.remove(item);
            }
        }.bind(this);

        // cancel editing an item and revert to the previous content
        this.cancelEditing = function (item) {
            item.editing(false);
            item.title(item.previousTitle);
        }.bind(this);

        // count of all completed todos
        this.completedCount = ko.computed(function () {
            return this.todos().filter(function (todo) {
                return todo.completed();
            }).length;
        }.bind(this));

        // count of todos that are not complete
        this.remainingCount = ko.computed(function () {
            return this.todos().length - this.completedCount();
        }.bind(this));

        // writeable computed observable to handle marking all complete/incomplete
        this.allCompleted = ko.computed({
            //always return true/false based on the done flag of all todos
            read: function () {
                return !this.remainingCount();
            }.bind(this),
            // set all todos to the written value (true/false)
            write: function (newValue) {
                this.todos().forEach(function (todo) {
                    // set even if value is the same, as subscribers are not notified in that case
                    todo.completed(newValue);
                });
            }.bind(this)
        });

        // helper function to keep expressions out of markup
        this.getLabel = function (count) {
            return ko.utils.unwrapObservable(count) === 1 ? ‘item‘ : ‘items‘;
        }.bind(this);

        // internal computed observable that fires whenever anything changes in our todos
        ko.computed(function () {
            // store a clean copy to local storage, which also creates a dependency on the observableArray and all observables in each item
            localStorage.setItem(‘todos-knockoutjs‘, ko.toJSON(this.todos));
        }.bind(this)).extend({
            throttle: 500
        }); // save at most twice per second
    };

1. ViewModel是model和View的中间接口
2. ViewMode提供View与Model数据之间的命令，即这里的data-bind的值，ViewModel中的方法
3. UI的渲染均由ViewModel通过命令来控制

$(‘#update‘).click(function(e) {
    // 1.事件处理程序
    e.preventDefault();
    
    // 2.获取对应的model的属性值
    var title = $(‘#text‘).val();
    
    // 3.调用业务逻辑
    $.ajax({
        url        : ‘/xxx‘,
        type    : ‘POST‘,
        data    : {
            title        : title,
            completed    : false
        },
        success : function(data) {
            // 4.对data进行处理，并进行对应的dom渲染
        },
        error: function() {
            // 4.错误处理
        }
    });

});

1.构造模型Model
2.分离事件绑定，形成Controller
3.维护模型Model（and 模型集合Model Collection），通过Model的改变，通知对应的View重新渲染
4.分离View显示逻辑