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對象是等價的。