Knockoutjs是微软mvc4里一个新东西，用这在MVC环境里实现MVVM，小微这次没有大张旗鼓，而是愉愉的为我们开发者嵌入了一个实现MVVM的插件，这下面的几篇文章中，我和大家将一起去探讨它，
它是如何把前台开发者与后台开发者的工作彻底分离的。
对于html标记来说，为它们赋值的方法有很多，你使用JS动态为它赋值也是可能的，但从面向对象的角度来说，意义不大，而当前台开发者了解数据结构后，可以使用Knockoutjs实现面向对象的数据绑定，
HTML元素的面向对象的赋值，今天是个开篇，内容比较简单，只讲一下text,value和attr的数据绑定。
text绑定：你可以为p,span,div,td等标记去加这个text元素
value绑定：你可以为input标记加value元素
attr绑定：你可以为标记动态添加它们的属性，如<a>标签的href,title,<img>标签的src,alt等等
visible绑定：可以动态显示或隐藏指定的标记，true值为显示，false值为隐藏
with绑定：可以绑定一个对象，然后在内部标记里就可以访问对象的属性了
下面的实例中，包含了上面几个概念的用法：
<p data-bind="with:lines"> 单价：<input type="text" data-bind='value:productPrice, valueUpdate: "afterkeydown"' /> 数量：<input type="text" data-bind='visible:productPrice() > 0,value: productCount, valueUpdate: "afterkeydown"' /> 小计：<span data-bind="text:total"></span> <a data-bind='attr:{href:"/home/add/"+id,title:name}'>添加</a> </p> <script type="text/ecmascript"> var product = function () { self = this; self.id = 1; self.name = "测试产品"; self.productPrice = ko.observable(0); self.productCount = ko.observable(1); self.total = ko.computed(function () { return self.productCount() * self.productPrice(); }); } var products = function () { var self = this; self.lines = ko.observable(new product()); } ko.applyBindings(new products()); </script>
上面的实例中，当productPrice 为0时，会将productPrice所在的元素隐藏，而这个实例中的数据返回为一个对象lines，这时如果希望访问它内部属性，需要我们使用with关键字。
怎么样，Knockout给我们不一般的感觉吧，它使用前台开发者可以不去关心数据的生产方式，而直接以标记的形式填充即可。
本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定，如需转载请自行联系原博主。