Knockout.Js官網學習（Mapping插件）

前言

　　Knockout設計成容許你使用任何JavaScript對象做爲view model。必須view model的一些屬性是observable的，你可使用KO綁定他們到你的UI元素上，當這些observable值改變的時候，這些UI元素就會自動更新。

使用mapping要引用的Js文件https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output。

手工mapping

顯示當前服務器時間和你網站上的當前用戶數。你應該使用以下的view model來表明你的這些信息：

    var viewModel = {
        serverTime: ko.observable(),
        numUsers: ko.observable()
    };

而後綁定view model到HTML元素上，以下：

The time on the server is: <span data-bind="text: serverTime"></span>
and <span data-bind="text: numUsers"></span> user(s) are connected.

因爲view model屬性是observable的，在他們變化的時候，KO會自動更新綁定的HTML元素。

接下來，從服務器獲取最新的數據。或許每隔5秒你要調用一次Ajax請求（例如，使用jQuery的$.getJSON或$.ajax函授）：

    ///獲取服務器端數據
    function GetData() {
        $.getJSON("../Home/GetServerData?Token="+new Date(), {}, function (data) {
            viewModel.serverTime(data.Date);
            viewModel.numUsers(data.Count);
        });
        setInterval("GetData", 1000);
    }
    GetData();

後臺調用方法返回JSON數據

        public JsonResult GetServerData()
        {
            ServerData sd=new ServerData();
            sd.Date = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
            sd.Count = 3;
            return this.Json(sd, JsonRequestBehavior.AllowGet);
        }

而且定義了一個簡單的實體類

    public class ServerData
    {
        public string Date { get; set; }

        public int Count { get; set; }
    }

返回數據顯示爲

最後，用這些數據更新你的view model（不使用mapping插件），代碼上面也有，就是

            viewModel.serverTime(data.Date);
            viewModel.numUsers(data.Count);

最終頁面就經過Ko自動更新綁定了數據

爲了使數據顯示在頁面上，全部的屬性都要像這樣寫代碼。若是你的數據結構很複雜的話（例如，包含子對象或者數組），那就維護起來就至關痛苦。mapping插件就是來讓你的JavaScript簡單對象（或JSON結構）轉換成observable的view model的。

使用ko.mapping

經過mapping插件建立view model，直接使用ko.mapping.fromJS函數來建立：

var viewModel = ko.mapping.fromJS(data);

它會自動將data裏全部的屬性建立成observable類型的屬性。你能夠經過ko.mapping.fromJS 函數按期從服務器獲取數據，而後更新你的view model：

            ko.mapping.fromJS(data,{}, viewModel);

如何mapping

　　對象的全部屬性都被轉換成observable類型值，若是獲取的對象的值改變了，就會更新這個observable類型的值.

     數組也被轉換成了observable數組，若是服務器更新改變了數組的個數，mapping插件也會添加或者刪除相應的item項，也會盡可能保持和原生JavaScript數組相同的order順序。

Unmapping

若是你想讓map過的對象轉換成原來的JavaScript對象，使用以下方式：

var unmapped = ko.mapping.toJS(viewModel);

此時對以前建立的實體類對象的兩個字段名稱進行了修改，要與View Model中屬性的名稱保持一致。

會建立一個unmapped對象，只包含你以前map過的對象屬性，換句話說，你在view model上手工添加的屬性或者函數都會被忽略的，惟一例外的是_destroy屬性是能夠unmapped回來的，由於你從ko.observableArray裏destroy一個item項的時候會生成這個屬性。 請參考「高級用法」小節如何配置使用。

與JSON字符串一塊兒使用

若是你的Ajax調用返回的是JSON字符串（而不是反序列化後的JavaScript對象），你可使用ko.mapping.fromJSON函數來建立或者更新你的view model。用ko.mapping.toJSON實現unmap。

使用.from/toJSON函數處理JSON字符串和使用.from/toJS函數處理JS對象是等價的。