<style type="text/css"> .testbold { background-color:powderblue; } </style> <div data-bind="css:{testbold:myViewModel.Name()=='Lilei'}">aaaa</div> var myViewModel = { Name: ko.observable("Lilei"), Profession: ko.observable("软件工程师"), Age:ko.observable(40) };
该div会显示背景色。
如果需要增加或移除多个样式，只要稍微改下即可，比如：
<div data-bind="css:{testbold:myViewModel.Name()=='Lilei',testborder:myViewModel.Profession()=='PHP工程师'}">aaaa</div>
4.9、style
如果css绑定的作用是向标签动态添加或移除class样式，那么style绑定的作用就是想标签动态添加或移除某一个样式。比如：
<div data-bind="css:{background-color:myViewModel.Name()=='Lilei'?'red':'white'}">aaaa</div>
如果是添加或者移除多个，同css绑定的用法
4.10、attr
attr绑定主要用于向标签添加移除某一个或多个属性（包括自定义属性），永和和css类似。
4.11、click
click绑定表示在对应的DOM元素上面添加点击事件的执行方法。可以在任意元素上面使用。
<div> <input type="button" value="测试click绑定" data-bind="click:ClickFunc" /> </div> var myViewModel = { ClickFunc:function(){ alert($(event.currentTarget).val()); } }; ko.applyBindings(myViewModel);
event.currentTarget表示当前点击的DOM元素。有时为了简便，我们直接使用匿名函数的方式绑定，比如：
<div> <input type="button" value="测试click绑定" data-bind="click:function(){ alert('点击了'); }" /> </div>
但是这种将js揉到html里面的写法让博主难以接受，并且觉得维护起来相对不方便，尤其是点击事件里面的逻辑略复杂时。所以，如非必须，不建议直接写这种匿名函数的方式。
4.12、其他
关于data-bind的所有绑定，可以看官网上面的介绍，这里就不一一列举了。需要用的时候去官网上查下就好了。看看官网上面列举的所有绑定：
5、Json对象和监控属性的转化及关系
我们知道，为了避免不同语言直接的展现方式，一般情况下我们前端和后端交互的时候统一使用Json格式的数据，我们通过http请求从后端取到的数据模型，而要使用我们的ko的一些特性，必须要将这些普通的数据模型转换成ko的监控属性；反过来，我们使用ko的监控属性，有时又需要把这些属性转换为普通的json数据传到后台，那么如何实现这个转换呢？
5.1、JSON对象转换成ViewModel
比如我们从后台取到一个Json对象，然后把它变成到我们的viewmodel，然后绑定到我们的界面DOM。
$.ajax({ url: "/Home/GetData", type: "get", data: {}, success: function (data, status) { var oJson = data; } });
我们发送一个请求到后端，取到一个json对象，赋值到oJson，然后我们把oJson转换成viewmodel，最直观的方式就是手动转换了。比如我们可以这样：
var myViewModelJson = { DeptName: ko.observable(), DeptLevel: ko.observable(), DeptDesc:ko.observable() }; ko.applyBindings(myViewModelJson);
然后在ajax请求的success里面
success: function (data, status) { var oJson = data; myViewModelJson.DeptName(oJson.DeptName); myViewModelJson.DeptLevel(oJson.DetpLevel); myViewModelJson.DeptDesc(oJson.DeptDesc); }
这样，通过手动绑定，实现了json对象到viewmodel的绑定。这样做的好处就是灵活，坏处显而易见，手工代码量太大。
还好，有我们万能的开源，总有人想到更好的办法，我们使用knockout.Mapping组件就能很好地帮助我们界面json对象到viewmodel的转换。
knockout.Mapping开源地址：下载
下面来简单看看它如何使用，还是上面的例子，我们不用实现定义任何viewmodel，首先需要引用knockout.mapping.js
<script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>
注意：这里knock.mapping-lastest.js必须要放在knockout-3.4.0.min.js的后面，否则调用不到ko.mapping。
然后直接在success函数里面这样使用
success: function (data, status) { var myViewModelJson2 = ko.mapping.fromJS(data); ko.applyBindings(myViewModelJson2); }
我们来看效果：
