返回目錄

Knockoutjs是微軟mvc4里一(yi)個新(xin)東西，用這在MVC環境里實(shi)現MVVM，小微這次沒(mei)有大(da)張旗(qi)鼓，而是愉愉的(de)為我們(men)開發者嵌入了一(yi)個實(shi)現MVVM的(de)插(cha)件，這下面的(de)幾篇文章(zhang)中，我和大(da)家將一(yi)起去探(tan)討它，

它是如何把前臺開發者與后臺開發者的工作徹底分離的。

對于html標記來(lai)說(shuo)(shuo)，為它們賦(fu)值(zhi)的(de)方(fang)法有很(hen)多，你使用(yong)JS動態(tai)為它賦(fu)值(zhi)也是可(ke)能的(de)，但(dan)從面向對象的(de)角度來(lai)說(shuo)(shuo)，意(yi)義不大(da)，而當前臺開(kai)發者了解(jie)數據(ju)結構(gou)后，可(ke)以使用(yong)Knockoutjs實現面向對象的(de)數據(ju)綁(bang)定，

HTML元素的面向(xiang)對象的賦(fu)值(zhi)，今天是(shi)個開篇，內容比較簡單，只講一下(xia)text,value和(he)attr的數據綁定。

text綁定：你(ni)可以為(wei)p,span,div,td等標(biao)記(ji)去加這個(ge)text元素(su)

value綁定(ding)：你可以為input標記加value元素

attr綁定(ding)：你可以(yi)為標記動態添加它們(men)的(de)屬性，如<a>標簽的(de)href,title,<img>標簽的(de)src,alt等(deng)等(deng)

visible綁定(ding)：可以(yi)動態(tai)顯示(shi)或隱藏(zang)指定(ding)的標記，true值(zhi)為(wei)顯示(shi)，false值(zhi)為(wei)隱藏(zang)

with綁定：可以綁定一個對(dui)象，然后在內部標記里就可以訪問對(dui)象的屬性了

下面的實例中，包含了上面幾(ji)個(ge)概(gai)念的用法：

 <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所在的元素隱藏，而這(zhe)個實例中的數(shu)據返(fan)回(hui)為一(yi)個對象lines，這(zhe)時如果希望訪問(wen)它內部屬性，需要(yao)我們使用with關鍵字。

怎么樣，Knockout給我們不(bu)(bu)一般的(de)感覺(jue)吧，它使(shi)用前臺開發者可以(yi)不(bu)(bu)去關心數據的(de)生產方式(shi)，而直接以(yi)標記的(de)形式(shi)填充即可。

返回目錄