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給我們不一般的感覺吧，它使用前台開發者可以不去關心數據的生產方式，而直接以標記的形式填充即可。

返回目錄