Knockout.js学习之mapping插件使用

Knockout设计成允许你使用任何JavaScript对象作为view model。必须view model的一些属性是observable的，你可以使用KO绑定他们到你的UI元素上，当这些observable值改变的时候，这些UI元素就会自动更新。

绝大多数程序都需要从服务器端获取数据，但是由于服务器不知道observable的概念是什么，它只支持简单的JavaScript对象（通常是序列化以后的JSON），mapping插件可以让你很方便地将简单JavaScript对象mapp到带有observable值的view model。你也可以自己写JavaScript代码将从服务器获取的数据来构建 view model，mapping插件只是一种很好的替代而已。

例子：手工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函数）：

var data = getDataUsingAjax();          // Gets the data from the server

然后，服务器返回和下面相似的JSON数据：

{    serverTime: '2010-01-07',    numUsers: 3}

最后，用这些数据更新你的view model（不使用mapping插件），代码如下：

// Every time data is received from the server:viewModel.serverTime(data.serverTime);viewModel.numUsers(data.numUsers);

为了使数据显示在页面上，所有的属性都要像这样写代码。如果你的数据结构很复杂的话（例如，包含子对象或者数组），那就维护起来就相当痛苦。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：

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

如何mapping？
对象的所有属性都被转换成observable类型值，如果获取的对象的值改变了，就会更新这个observable类型的值.
数组也被转换成了observable数组，如果服务器更新改变了数组的个数，mapping插件也会添加或者删除相应的item项，也会尽量保持和原生JavaScript数组相同的order顺序。

Unmapping
如果你想让map过的对象转换成原来的JavaScript对象，使用如下方式：

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

会创建一个unmapped对象，只包含你之前map过的对象属性，换句话说，你在view model上手工添加的属性或者函数都会被忽略的，唯一例外的是_destroy属性是可以unmapped回来的，因为你从ko.observableArray里destroy一个item项的时候会生成这个属性。

mapping还有很多高级属性，如果想看的同学可以去参考api，个人认为mapping到这里已经够用了。