knockout.js--基本用法

Posted 2020-10-14 Ya_豆芽

1，html元素的面向对象的赋值，数据绑定

　　text绑定：为p,span,div,td等加text属性值（即元素内部显示的文本），

　　value绑定：为input添加value属性值，

　　attr绑定：为元素动态添加他们的属性，如a标签的href,title等等

　　visible绑定：动态显示隐藏指定的标记，TRUE为显示，FALSE为隐藏

　　width绑定：可以绑定一个对象，然后在内部标记里就可以访问对象的属性。

<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>

</p>
<script type="text/ecmascript">
    var product = function () {
        self = this;
        self.id = 1;
        self.name = "测试产品";
        self.productPrice = ko.observable("0"); //ko.observable会先设置值再返回一个函数赋值给 价格（self.productPrice）,价格就被实时监控，通过productPrice()获取属性值，通过productPrice("4567")改变变量的值
        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());//new 实例化一个函数==view model，或直接声明一个对象成为view model
    }
    ko.applyBindings(new products());//data-bind将viewmodel和HTML关联一起，但是浏览器不能识别data-bind，ko.applyBindings(ele1,ele2)激活knockout。applyBindings有两个参数，第一个为必选(创建viewModel），第二个可选用来指定knockout控制HTML的范围。
</script>

　　当productPrice 为0时，会将productCount所在的元素隐藏，而这个实例中的数据返回为一个对象lines，这时如果希望访问它内部属性，需要我们使用with关键字。