讓我們看看一個更高級的例子，我們可以看看我們的Todo應(yīng)用。一個用于這個應(yīng)用的裁剪后的KnockoutJS的視圖，包含有所有必要的數(shù)據(jù)綁定，這個視圖看起來是下面這個樣子。

<div id="todoapp">
    <header>
        <h1>Todos</h1>
        <input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add"
               placeholder="What needs to be done?"/>
    </header>
    <section id="main" data-bind="block: todos().length">

        <input id="toggle-all" type="checkbox" data-bind="checked: allCompleted">
        <label for="toggle-all">Mark all as complete</label>

        <ul id="todo-list" data-bind="foreach: todos">

           <!-- item -->
            <li data-bind="css: { done: done, editing: editing }">
                <div class="view" data-bind="event: { dblclick: $root.editItem }">
                    <input class="toggle" type="checkbox" data-bind="checked: done">
                    <label data-bind="text: content"></label>
                    <a class="destroy" href="#" data-bind="click: $root.remove"></a>
                </div>
                <input class="edit' type="text"
                       data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }"/>
            </li>

        </ul>

    </section>
</div>

請注意，這個標(biāo)記的基本布局是相對直觀的，包含有一個輸入文本框(新的todo)用于增加新條目，用于標(biāo)記條目完成的開關(guān)，以及一個擁有模板的列表（todo列表），這個模板以anli的形式展現(xiàn)Todo條目。

上面標(biāo)記中綁定的數(shù)據(jù)可以分成下面幾塊：

• 輸入的文本框new-todo 有一個當(dāng)前屬性的數(shù)據(jù)綁定，當(dāng)前要增加的條目的值存儲在這里。我們的視圖模型(后面就會看到)觀察當(dāng)前屬性，并且綁定在添加事件上。當(dāng)回車鍵按下的時候，添加事件就被出發(fā)了，我們的視圖模型就可以處理當(dāng)前的值按照需要并且將其加入到Todo列表中。
• 輸入勾選框可以通過點擊標(biāo)示所有當(dāng)前條目為完成狀態(tài)。如果勾選了，觸發(fā)完成事件，這個事件可以被模型視圖觀察到。
• 有一類條目是進(jìn)行中狀態(tài)。當(dāng)一個任務(wù)被標(biāo)記為進(jìn)行中，CSS類也會根據(jù)這個狀態(tài)進(jìn)行標(biāo)識。如果雙擊條目，$root.editItem 回調(diào)就會被執(zhí)行。
• toggle類的勾選框表明當(dāng)前的進(jìn)行狀態(tài)。
• 一個文本標(biāo)簽包含有Todo條目的內(nèi)容
• 當(dāng)點擊一個移除按鈕時可以調(diào)用$root.remove 回調(diào)函數(shù)。
• 編輯模式下的一個輸入文本框可以保存Todo條目的內(nèi)容?；剀囨I事件將會設(shè)定編輯屬性為真或者假。

視圖模型

視圖模型被認(rèn)為是一個專門進(jìn)行數(shù)據(jù)轉(zhuǎn)換的控制器。它可以把對象信息轉(zhuǎn)換到視圖信息，將命令從視圖攜帶到對象。

例如，我們想象我們有一個對象的日期屬性是unix格式的（e.g 1333832407），而不是用戶視圖的所需要的日期格式（e.g 04/07/2012 @ 5:00pm），這時就有必要把unix的日期格式轉(zhuǎn)換為視圖需要的格式。我們的對象只簡單保存原始的unix數(shù)據(jù)格式日期，視圖模型作為一個中間人角色會格式化原始的unix數(shù)據(jù)格式轉(zhuǎn)換為視圖需要的日期格式。

在這個場景下，視圖模型可以被看做一個對象，它處理很多視圖顯示邏輯。視圖模型也對外提供更新視圖狀態(tài)的方法，并通過視圖方法和觸發(fā)事件更新對象。

簡單來說，視圖模型位于我們UI層后面層。它通過視圖發(fā)布對象的公共數(shù)據(jù)，同時它作為視圖源提供數(shù)據(jù)和方法。

KnockoutJS描述視圖模型作為數(shù)據(jù)的表現(xiàn)和操作可以在UI上訪問和執(zhí)行。視圖模型并不是一個UI對象，也不是數(shù)據(jù)持久化對象，而是一個能夠為用戶提供儲存狀態(tài)及操作的層次對象。Knockout的視圖模型實現(xiàn)了JavaScript對象與HTML語言無關(guān)性。通過這個實現(xiàn)使開發(fā)保持了簡單，意味著我們可以在視圖層更加簡單的管理更多的組合方法。

對于我們的ToDo應(yīng)用程序的一部分KnockoutJS視圖模型可以是像下面這樣:

// our main ViewModel
    var ViewModel = function ( todos ) {
        var self = this;

    // map array of passed in todos to an observableArray of Todo objects
    self.todos = ko.observableArray(
    ko.utils.arrayMap( todos, function ( todo ) {
        return new Todo( todo.content, todo.done );
    }));

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

    // add a new todo, when enter key is pressed
    self.add = function ( data, event ) {
        var newTodo, current = self.current().trim();
        if ( current ) {
            newTodo = new Todo( current );
            self.todos.push( newTodo );
            self.current("");
        }
    };

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

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

    // writeable computed observable to handle marking all complete/incomplete
    self.allCompleted = ko.computed({

        // always return true/false based on the done flag of all todos
        read:function () {
            return !self.remainingCount();
        },

        // set all todos to the written value (true/false)
        write:function ( newValue ) {
            ko.utils.arrayForEach( self.todos(), function ( todo ) {
                //set even if value is the same, as subscribers are not notified in that case
                todo.done( newValue );
            });
        }
    });

    // edit an item
    self.editItem = function( item ) {
        item.editing( true );
    };
 ..

上面我們基本上提供了必需的加入、編輯或者移除記錄的方法，還有標(biāo)記所有現(xiàn)存的記錄已經(jīng)被完成的邏輯。注意：唯一真正需要關(guān)注的同前面我們的視圖模型的示例的不同之處就是觀察數(shù)組.在KnockoutJS中,如果我們希望監(jiān)測到并且去回應(yīng)一個單獨的對象發(fā)生的改變,我們可以使用觀察.然而如果我們希望檢測并且去回應(yīng)一個集合的事物所發(fā)生的改變,我們可以換用一個觀察數(shù)組.如何使用觀察數(shù)組的一個簡單示例就像下面這樣:

// Define an initially an empty array
var myObservableArray = ko.observableArray();

// Add a value to the array and notify our observers
myObservableArray.push( 'A new todo item' );

注意:感興趣的話,我們在前面所提到的完整的KnockoutJS Todo應(yīng)用程序可以從 TodoMVC 獲取到。

扼要重述: 視圖和視圖模型

視圖和視圖模型使用數(shù)據(jù)綁定和事件進(jìn)行通信。正如我們之前的視圖模型例子所見，視圖模型不僅僅發(fā)布對象屬性，它還提供其他的方法和特性，諸如驗證。

我們的視圖處理自己的用戶接口事件，并會把相關(guān)事件映射到視圖模型。對象和它屬性與視圖模型是同步的，且通過雙向數(shù)據(jù)綁定進(jìn)行更新。

觸發(fā)器（數(shù)據(jù)觸發(fā)器）允許我們進(jìn)一步在視圖狀態(tài)變化后改變我們的對象屬性。

小結(jié):視圖模型和模型

雖然可能會出現(xiàn)在MVVM中視圖模型完全對模型負(fù)責(zé)的情況,這些關(guān)系確實有一些值得關(guān)注的微妙之處.處于數(shù)據(jù)綁定的目的,視圖模型可以暴露出來一個模型或者模型屬性,而且也能夠包含獲取和操作視圖中暴露出來的屬性。

優(yōu)點和缺點

現(xiàn)在,我們完全對MVVM是什么,以及它是如何工作的,有了一個更好的了解.現(xiàn)在就讓我們來看看使用這種模式的優(yōu)點和缺點吧:

優(yōu)點:

• MVVM更加便于UI和驅(qū)動UI的構(gòu)造塊,這兩部分的并行開發(fā)
• 抽象視圖使得背后所需要的業(yè)務(wù)邏輯(或者粘合劑)的代碼數(shù)量得以減少
• 視圖模型比事件驅(qū)動代碼更加容易進(jìn)行單元測試
• 視圖模型(比視圖更加像是模型)能夠在不用擔(dān)心UI自動化和交互的前提下被測試

缺點:

• 對于更簡單的UI而言,MVVM可能矯枉過正了
• 雖然數(shù)據(jù)綁定可以是聲明性質(zhì)的并且工作得很好,但在我們簡單設(shè)置斷點的地方,它們比當(dāng)務(wù)之急的代碼更加難于調(diào)試
• 在非凡的應(yīng)用程序中的數(shù)據(jù)綁定能夠創(chuàng)造許多的賬簿.我們也并不希望以綁定比被綁定目標(biāo)對象更加重量級,這樣的境地告終
• 在大型的應(yīng)用程序中,將視圖模型的設(shè)計提升到獲取足夠所需數(shù)量的泛化,會變得更加的困難

MVVM 的低耦合數(shù)據(jù)綁定

常見到有著MVC或者M(jìn)VP開發(fā)經(jīng)驗的JavaScript程序員評論MVVM的時候在抱怨它會分散他們的關(guān)注點。也就是說，他們習(xí)慣在一個視圖中有相當(dāng)數(shù)量的數(shù)據(jù)被耦合在了HTML標(biāo)簽中。

我必須承認(rèn)當(dāng)我第一次體驗實現(xiàn)了MVVM的JavaScript框架后(例如 KnockoutJS, Knockback)，我很驚訝很多程序員都想要回到一個難以維護(hù)的混淆了邏輯(JavaScript代碼)和HTML標(biāo)簽做法的過去。然而現(xiàn)實是使用MVVM會有很多好處（我們之前說過），包括設(shè)計師能更容易的通過他們的標(biāo)記去綁定相關(guān)邏輯。

在我們中間的傳統(tǒng)程序員，你會很開心知道現(xiàn)在我們能夠通過數(shù)據(jù)綁定這個特性大量減少程序代碼的耦合程度，且KnockoutJS從1.3這個版本就開始提供自定義綁定功能。

KnockoutJS 默認(rèn)有一個數(shù)據(jù)綁定提供者，這個提供者搜索所有的附屬有數(shù)據(jù)綁定屬性的元素，如下面的例子：

<input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?"/>

當(dāng)這個提供者定位一個到包含有該屬性的元素時，這個工具將會分析該元素，使用當(dāng)前的數(shù)據(jù)上下文來將其轉(zhuǎn)化成一個綁定對象。這種方式是 KnockoutJS百分百可以工作的方式，通過這種方式，我們可以采用聲明式的方法對元素增加綁定，KnockoutJS之后會在該層上將數(shù)據(jù)綁定到元素上。

當(dāng)我們開始構(gòu)建復(fù)雜的視圖的時候，我們最終就可能得到大量的元素和屬性在標(biāo)記中綁定數(shù)據(jù)，這種方式將會變得很難管理。通過自定義的綁定提供者，這就不算個問題。

一個綁定提供者主要關(guān)心兩件事：

• 給定一個DOM節(jié)點，這個節(jié)點是否包含任何數(shù)據(jù)綁定？
• 如果節(jié)點回答是YES，那么這個綁定的對象在當(dāng)前數(shù)據(jù)上下文中，看起來是什么樣的？

綁定提供者實現(xiàn)了兩個功能：

• nodeHasBindings:這個有一個DOM的節(jié)點參數(shù)，這個參數(shù)不一定是一個元素
• getBindings:返回一個對象代表當(dāng)前數(shù)據(jù)上下文下的要使用的綁定

一個框架綁定提供者看起來如下：

var ourBindingProvider = {
  nodeHasBindings: function( node ) {
      // returns true/false
  },

  getBindings: function( node, bindingContext ) {
      // returns a binding object
  }
};

在我們充實這個提供者之前，讓我們先簡要的討論一下數(shù)據(jù)綁定屬性中的邏輯。

當(dāng)使用Knockout的MVVM，我們會對將應(yīng)用邏輯過度綁定到視圖上的這種方法不滿。我們可以實現(xiàn)像CSS類一樣的東西，將綁定根據(jù)名字賦值給元素。Ryan Niemeyer(knockmeout.net上的)之前提出使用數(shù)據(jù)類用于這個目的，來避免將展示類和數(shù)據(jù)類混淆，讓我們改造我們的nodeHasBindings 函數(shù)，來支持這個概念：

// does an element have any bindings?
function nodeHasBindings( node ) {
    return node.getAttribute ? node.getAttribute("data-class") : false;
};

接下來，我們需要一個敏感的getBindings()函數(shù)。既然我們堅持使用CSS類的概念，為什么不考慮一下支持空格分割類呢，這樣可以使我們在不同元素之間共享綁定標(biāo)準(zhǔn)。

讓我們首先看一下我們的綁定長什么樣子。我們建立一個對象用于持有它們，在這些綁定處，我們的屬性名需要和我們數(shù)據(jù)類中使用的關(guān)鍵字相匹配。

注意：對于將使用傳統(tǒng)數(shù)據(jù)綁定方式的KnockoutJS應(yīng)用轉(zhuǎn)化成一個使用自定義綁定提供者的不引人矚目的綁定方式。我們簡單的拉取我們所有的數(shù)據(jù)綁定屬性，使用數(shù)據(jù)類屬性來替換它們，并且像之前做的一樣，將我們的綁定放到綁定對象中去。

var viewModel = new ViewModel( todos || [] ),
    bindings = {

        newTodo:  {
            value: viewModel.current,
            valueUpdate: "afterkeydown",
            enterKey: viewModel.add
        },

        taskTooltip : {
            visible: viewModel.showTooltip
        },
        checkAllContainer : {
            visible: viewModel.todos().length
        },
        checkAll: {
            checked: viewModel.allCompleted
        },

        todos: {
            foreach: viewModel.todos
        },
        todoListItem: function() {
            return {
                css: {
                    editing: this.editing
                }
            };
        },
        todoListItemWrapper: function() {
            return {
                css: {
                    done: this.done
                }
            };
        },
        todoCheckBox: function() {
            return {
                checked: this.done
            };
        },
        todoContent: function() {
            return {
                text: this.content,
                event: {
                    dblclick: this.edit
                }
            };
        },
        todoDestroy: function() {
            return {
                click: viewModel.remove
            };
        },       

        todoEdit: function() {
            return {
                value: this.content,
                valueUpdate: "afterkeydown",
                enterKey: this.stopEditing,
                event: {
                    blur: this.stopEditing
                }
            };
        },

        todoCount: {
            visible: viewModel.remainingCount
        },
        remainingCount: {
            text: viewModel.remainingCount
        },
        remainingCountWord: function() {
            return {
                text: viewModel.getLabel(viewModel.remainingCount)
            };
        },
        todoClear: {
            visible: viewModel.completedCount
        },
        todoClearAll: {
            click: viewModel.removeCompleted
        },
        completedCount: {
            text: viewModel.completedCount
        },
        completedCountWord: function() {
            return {
                text: viewModel.getLabel(viewModel.completedCount)
            };
        },
        todoInstructions: {
            visible: viewModel.todos().length
        }
    };

    ....

上面代碼中，我們丟掉了兩行，我們?nèi)匀恍枰猤etBindings函數(shù)，這個函數(shù)遍歷數(shù)據(jù)類屬性中每一個關(guān)鍵字，并從中構(gòu)建最終對象。如果我們檢測到綁定對象是個函數(shù)，我們使用當(dāng)前的數(shù)據(jù)調(diào)用它。我們的完成版自定義綁定提供中，如下：

 // We can now create a bindingProvider that uses
    // something different than data-bind attributes
    ko.customBindingProvider = function( bindingObject ) {
        this.bindingObject = bindingObject;

        // determine if an element has any bindings
        this.nodeHasBindings = function( node ) {
            return node.getAttribute ? node.getAttribute( "data-class" ) : false;
        };
      };

    // return the bindings given a node and the bindingContext
    this.getBindings = function( node, bindingContext ) {

        var result = {},
            classes = node.getAttribute( "data-class" );

        if ( classes ) {
            classes = classes.split( "" ); 

            //evaluate each class, build a single object to return
            for ( var i = 0, j = classes.length; i < j; i++ ) {

               var bindingAccessor = this.bindingObject[classes[i]];
               if ( bindingAccessor ) {
                   var binding = typeof bindingAccessor === "function" ? bindingAccessor.call(bindingContext.$data) : bindingAccessor;
                   ko.utils.extend(result, binding);              
               }  

            }
        }

        return result;
    };
};

我們綁定對象最后的幾行，定義如下：

// set ko's current bindingProvider equal to our new binding provider
ko.bindingProvider.instance = new ko.customBindingProvider( bindings );  

// bind a new instance of our ViewModel to the page
ko.applyBindings( viewModel );

})();

我們在這里所做的是為我們的綁定處理器有效的定義構(gòu)造器，綁定處理器接受一個我們用來查找綁定的對象（綁定）。然后我們可以使用數(shù)據(jù)類為我們應(yīng)用程序視圖的重寫標(biāo)記，像下面這樣做：

<div id="create-todo">
                <input id="new-todo" data-class="newTodo" placeholder="What needs to be done?" />
                <span class="ui-tooltip-top" data-class="taskTooltip" style="display: none;">Press Enter to save this task</span>
            </div>
            <div id="todos">
                <div data-class="checkAllContainer" >
                    <input id="check-all" class="check" type="checkbox" data-class="checkAll" />
                    <label for="check-all">Mark all as complete</label>
                </div>
                <ul id="todo-list" data-class="todos" >
                    <li data-class="todoListItem" >
                        <div class="todo" data-class="todoListItemWrapper" >
                            <div class="display">
                                <input class="check" type="checkbox" data-class="todoCheckBox" />
                                <div class="todo-content" data-class="todoContent" style="cursor: pointer;"></div>
                                <span class="todo-destroy" data-class="todoDestroy"></span>
                            </div>
                            <div class="edit'>
                                <input class="todo-input" data-class="todoEdit'/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

Nei Kerkin 已經(jīng)使用上面的方式組合成了一個完整的TodoMVC示例，它可以 從 這里獲取到。 雖然上面的解釋看起來像是有許多的工作要做，現(xiàn)在我們就有一個一般的getBindingmethod方法要寫。比起為了編寫我們的KnockoutJS應(yīng)用程序而嚴(yán)格使用數(shù)據(jù)綁定，簡單的重用和使用數(shù)據(jù)類更加的瑣碎。最終的結(jié)果是希望得到一個干凈的標(biāo)記，其中我們的數(shù)據(jù)綁定會從視圖切換到一個綁定對象。

MVC VS MVP VS MVVM

MVP和MVVM都是MVC的衍生物。它和它的衍生物之間關(guān)鍵的不同之處在于每一層對于其它層的依賴，以及它們相互之間是如何緊密結(jié)合在一起的。

在MVC中，視圖位于我們架構(gòu)的頂部，其背后是控制器。模型在控制器后面，而因此我們的視圖了解得到我們的控制器，而控制器了解得到模型。這里，我們的視圖有對模型的直接訪問。然而將整個模型完全暴露給視圖可能會有安全和性能損失，這取決于我們應(yīng)用程序的復(fù)雜性。MVVM則嘗試去避免這些問題。

在MVP中，控制器的角色被代理器所取代，代理器和視圖處于同樣的地位，視圖和模型的事件都被它偵聽著并且接受它的調(diào)解。不同于MVVM，沒有一個將視圖綁定到視圖模型的機制，因此我們轉(zhuǎn)而依賴于每一個視圖都實現(xiàn)一個允許代理器同視圖去交互的接口。

MVVM進(jìn)一步允許我們創(chuàng)建一個模型的特定視圖子集，包含了狀態(tài)和邏輯信息，避免了將模型完全暴露給視圖的必要。不同于MVP的代理器，視圖模型并不需要去引用一個視圖。視圖可以綁定到視圖模型的屬性上面，視圖模型則去將包含在模型中的數(shù)據(jù)暴露給視圖。像我們所提到過的，對視圖的抽象意味著其背后的代碼需要較少的邏輯。

對此的副作用之一就是視圖模型和視圖層之間新增的的用于翻譯解釋的一層會有性能損失。這種解釋層的復(fù)雜度根據(jù)情況也會有所差異——它可能像復(fù)制數(shù)據(jù)一樣簡單，也可能會像我們希望用視圖理解的一種形式去操作它們，那樣復(fù)雜。由于整個模型是現(xiàn)成可用的，從而這種操作可以被避免掉，所以MVC沒有這種問題。

Backbone.js Vs KnockoutJS

了解MVC，MVP和MVVM之間的細(xì)微差別是很重要的，然而基于我們已經(jīng)了解到的東西，開發(fā)者最終會問到是否它們應(yīng)該考慮使用KnockoutJS而不是Backbone這個問題。下面的一些相關(guān)事項對此可能有些幫助：

• 兩個庫都設(shè)計用于不同的目標(biāo)，它常常不僅僅簡單的知識選擇MVC或者M(jìn)VVM的問題。
• 如果數(shù)據(jù)綁定和雙向通信是你主要關(guān)注的問題，KnockoutJS絕對是應(yīng)該選擇的方式。實踐中任何存儲在DOM節(jié)點中的值或者屬性都能夠使用此方法映射到Javascript對象上面。
• Backbone在同RESTful服務(wù)的易于整合方面有其過人之處，而KnockoutJS模型就是簡單的Javascript對象，而更新模型所需要的代碼也必須要由開發(fā)者自己來寫。
• KnockoutJS專注于自動的UI綁定，如果嘗試使用Backbone來做的話則會要求更加細(xì)節(jié)的自定義代碼。由于Backbone自身就意在獨立于UI而存在，所以這并不是它的問題。然而Knockback也確實能協(xié)助并解決此問題。 使用KnockoutJS，我們能夠?qū)⑽覀冏约簱碛械暮瘮?shù)綁定到視圖模型觀察者上面，任何時候觀察者一旦發(fā)生了變化，它都會執(zhí)行。這允許我們能夠擁有同在Backbone中發(fā)現(xiàn)的一樣級別的靈活性。
• Backbone內(nèi)置有一個堅實的路由解決方案，而KnockoutJS則沒有提供路由供我們選擇。然而人們?nèi)绻枰脑?，可以很容易的加入這個行為，使用Ben Alman的BBQ插件或者一個像Miller Medeiros優(yōu)秀的Crossroads就行了。

總結(jié)下來，我個人發(fā)覺KnockoutJS更適合于小型的應(yīng)用，而Backbone的特性在任何東西都是無序的場景下面才會是亮點。那就是說，許多開發(fā)者兩個框架都已經(jīng)使用過來編寫不同復(fù)雜度的應(yīng)用程序，而我建議在一個小范圍內(nèi)兩種都嘗試一下，在你決定哪一種能更好的為你工作之前。