代码释疑：通过ajax请求从后台取到的json对象，通过ko.mapping.fromJS()，很方便地将其转换成了viewmodel，是不是猴犀利！当然除了这种用法，还可以更新已经存在viewmodel，使用如下：
var myViewModelJson = { DeptName: ko.observable(), DeptLevel: ko.observable(), DeptDesc:ko.observable() }; ko.applyBindings(myViewModelJson); $(function () { $.ajax({ url: "/Home/GetData", type: "get", data: {}, success: function (data, status) { ko.mapping.fromJS(data, myViewModelJson) } }); });
在success里面，根据data的值去更新myViewModelJson这个viewmodel。
5.2、ViewModel转换成JSON对象
上面说了JSON对象转化为viewmodel，那么反过来，如果我们需要将viewmodel转换为Json对象传递到后端，怎么办呢？
knockout里面提供了两个方法：
•ko.toJS()：将viewmodel转换为JSON对象
•ko.toJSON()：将viewmodel转换为序列化过的Json string。
比如我们的代码如下：
$(function () { var oJson1 = ko.toJS(myViewModelJson); var oJson2 = ko.toJSON(myViewModelJson); }); var myViewModelJson = { DeptName: ko.observable("研发部"), DeptLevel: ko.observable("2"), DeptDesc: ko.observable("开发一伙人") }; ko.applyBindings(myViewModelJson);
那么我们来监控下oJson1和oJson2的值：
代码释疑：通过上面这张图，很容易理解两个方法的区别，这里需要说明一点的是，这两个方法是ko自带的，并不需要mapping组件的支持。
6、创建自己的data-bind属性
上面讲了那么多，都是介绍knockout里面的一些绑定和监控，那么，有些时候，我们需要自定义我们的data-bind，型如： <label data-bind="myBind:Name"></label> ，这种需求再做组件封装的时候尤其有用，是否可以实现呢？当然可以。
在knockout里面，提供了ko.bindingHandlers属性，用于自定义data-bind属性，它的语法如下：
ko.bindingHandlers.MySelect = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { } };
就这样申明一下，然后在我们的html标签里面就可以使用自定义data-bind了。
<div> <select data-bind="MySelect:$root"> <option>研发部</option> <option>人事部</option> <option>行政部</option> </select> </div>
MySelect就是我们自定义的绑定属性，$root暂且可以理解为初始化（虽然这样解释并不严谨，如果有更加合理的解释欢迎指正）。
代码释疑：通过上面的ko.bindingHandlers就能简单实现自定绑定属性，需要说明两点：
•init，顾名思义初始化自定义绑定，它里面包含多个参数，一般使用较多的是前两个参数，第一个参数表示初始化自定义绑定的DOM元素，第二个参数一般用来传递初始化的参数。
•update，更新回调，当对应的监控属性变化时，会进入到这个方法。如果不需要回调，此方法可以不声明。
在此博主就结合原来分享过的一个下拉框组件MutiSelect来简单说明下自定义绑定的使用。
6.1、最简单的MutiSelect
一般情况下，如果我们需要使用ko去封装一些通用组件，就需要用到我们的ko.bindingHandlers，下面博主就结合MutiSelect组件来说说如何使用。
首先声明自定义的ko.bindingHandlers，在init方法里面初始化我们的select标签
ko.bindingHandlers.MySelect = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { $(element).multiselect(); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { } };
然后在页面标签里面使用
<div> <select data-bind="MySelect:$root"> <option>研发部</option> <option>人事部</option> <option>行政部</option> </select> </div>
最后第三部，激活绑定
$(function () { var MultiSelect = {}; ko.applyBindings(MultiSelect); });
如果不需要传递参数，这里只需要绑定一个空的viewmodel即可。有人疑惑了，第三部感觉没啥实际意义呢。博主的理解是，DOM元素需要使用data-bind去绑定数据，必须要启用ko的绑定，也就是这里的ko.applyBindings()。
得到效果：
6.2、参数传递
第一步还是自定义ko.bindingHandlers