【Web API系列教程】3.6 — 實戰：處理資料（建立JavaScript用戶端）

【Web API系列教程】3.6 — 實戰：處理資料（建立JavaScript用戶端）

在本節，你將使用HTML、JavaScript和Knockout.js庫為應用程式建立用戶端。我們將按如下步驟建立用戶端應用：
1， 展示books列表
2， 展示book詳細資料
3， 添加一本新書

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

視圖被資料繫結到視圖模型。視圖模型的更新將自動反映在視圖中。視圖模型也從視圖中擷取事件，比如按鈕的點擊。

這個實現使得在你的app中修改布局和UI更加容易，因為你可以改變這些綁定而無須任何代碼。例如，你可能以ul的方式展示一個項列表，那麼可以將其改變成表。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMiBpZD0="添加knockout庫">添加Knockout庫

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

Install-Package knockoutjs

這條命令將Knockout檔案添加到Scripts檔案夾下。

建立視圖模型

在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類啟用了資料繫結。當observable的內容改變時，observable會通知所有的資料繫結控制器，所以它們能夠去更新它們自身。（而observable類是一個observable的數組版本。）以此開始，我們的視圖模型有了兩個observable：
1， books維持books列表。
2， error包含如果AJAX調用失敗時的錯誤資訊

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

而ko.applyBinding方法是Knockout庫的一部分。它使用視圖模型作為一個參數並建立資料繫結。

添加Script Bundle

Bundle是一個在ASP.NET 4.5中出現的新特性，它使得組合或封裝多個檔案進一個檔案更加容易。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"));}