在本節(jié)，你將使用HTML、JavaScript和Knockout.js庫為應用程序創(chuàng)建客戶端。我們將按如下步驟建立客戶端應用：

在本節(jié)，你將使用HTML、JavaScript和Knockout.js庫為應用程序創(chuàng)建客戶端。我們將按如下步驟建立客戶端應用： 1， 展示books列表 2， 展示book詳細信息 3， 添加一本新書

Knockout.js庫使用了模型-視圖-視圖模型（MVVM）模式： 1， 模型是在業(yè)務域(在本例中是books和authors)中數(shù)據在服務器端的表現(xiàn)形式。 2， 視圖是表示層（HTML）。 3， 視圖模型是維持模型的JavaScript對象。視圖模型是UI的代碼抽象。它不具備HTML表現(xiàn)形式，相反，它表示抽象特征的視圖，例如”書籍列表“。

視圖被數(shù)據綁定到視圖模型。視圖模型的更新將自動反映在視圖中。視圖模型也從視圖中獲取事件，比如按鈕的點擊。

這個實現(xiàn)使得在你的app中修改布局和UI更加容易，因為你可以改變這些綁定而無須任何代碼。例如，你可能以ul的方式展示一個項列表，那么可以將其改變成表。

添加Knockout庫

在Visual Studio中，點擊Tools目錄，選擇Library Package Manager。然后選擇Package Manager Console。在Package Manager Console窗口，輸入以下命令：

Install-Package knockoutjs

這條命令將Knockout文件添加到Scripts文件夾下。

創(chuàng)建視圖模型

在Scripts文件夾下添加一個名為app.js的JavaScript文件。（在Solution Explorer中，右擊Scripts文件夾，選擇Add，然后選擇JavaScript File。）粘貼以下代碼：

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

在Knockout中，observable類啟用了數(shù)據綁定。當observable的內容改變時，observable會通知所有的數(shù)據綁定控制器，所以它們能夠去更新它們自身。（而observable類是一個observable的數(shù)組版本。）以此開始，我們的視圖模型有了兩個observable： 1， books維持books列表。 2， error包含如果AJAX調用失敗時的錯誤信息

該getAllbooks方法產生AJAX調用以得到books列表。然后將其結果添加到books數(shù)組中。

而ko.applyBinding方法是Knockout庫的一部分。它使用視圖模型作為一個參數(shù)并建立數(shù)據綁定。

添加Script Bundle

Bundle是一個在ASP.NET 4.5中出現(xiàn)的新特性，它使得組合或包裝多個文件進一個文件更加容易。Bundle減少了向服務器的請求，而這恰能改進頁面加載時間。

打開App_Start文件夾下的BundleConfig.cs文件，添加如下代碼到RegisterBundles方法。

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}