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

    返回目录

  • 相关阅读:
    HDU 1850 Being a Good Boy in Spring Festival
    UESTC 1080 空心矩阵
    HDU 2491 Priest John's Busiest Day
    UVALive 6181
    ZOJ 2674 Strange Limit
    UVA 12532 Interval Product
    UESTC 1237 质因子分解
    UESTC 1014 Shot
    xe5 android listbox的 TMetropolisUIListBoxItem
    xe5 android tts(Text To Speech)
  • 原文地址:https://www.cnblogs.com/lori/p/3502100.html
Copyright © 2011-2022 走看看