MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

返回目录

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给我们不一般的感觉吧，它使用前台开发者可以不去关心数据的生产方式，而直接以标记的形式填充即可。

返回目录