knockout.js--基本用法

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關鍵字。