（一）Knockout - ViewModel 的使用

計算屬性

實際應用中，我們通常需要對數據進行加工

如: 指定日期格式，將數字相加... 等，此時可使用ko.computed()。當數據發生改變是，KO會使用computed重新計算

DEMO1

更改firstName，lastName值後改變fullName

1 2 3 4 5 6 7 8

var AppViewModel = function() {<br>    var me = this;     me.firstName = ko.observable('Bob');     me.lastName = ko.observable('Smith');     me.fullName = ko.computed(function () {         return me.firstName() + " " + me.lastName();     }, this); } ko.applyBindings(new AppViewModel());

綁定到View上

1 2 3

<p>First name: <input data-bind="value: firstName"/></p> <p>Last name: <input data-bind="value: lastName"/></p> <h2>Hello,   <span data-bind="text: fullName"/>!</h2>

 

DEMO2

修改fullName，從而更新firstName，lastName的值

<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello,   <span data-bind="value: fullName"/>!</h2>

self.fullName = ko.computed({
    read: function () {
        return me.firstName() + " " + me.lastName();
    },
    write: function (value) {
        var lastSpacePos = value.lastIndexOf(" ");
        if (lastSpacePos > 0) { // Ignore values with no space character
            me.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
            me.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
        }
    },
    owner: me
});

 

DEMO3

金額格式的自動轉換（包括精度和格式）已經垃圾字符的過濾

<p>Enter bid price: <input data-bind="value: formattedPrice"/></p><br/>

var parseModel = function() {
    var me = this;
    me .price = ko.observable(25.99);
    me .formattedPrice = ko.computed({
        read: function() {
            return '$' + me.price().toFixed(2);    
        },
        write: function(val) {
            val = parseFloat(value.replace(/[^\.\d]/g, ""));
            me.price(isNaN(val ) ? 0 : val ); 
        },
        owner: me
    });
      
};
ko.applyBindings(new parseModel());

 

DEMO4

過濾並驗證用戶輸入

<p>Enter a numeric value: <input data-bind="value: attemptedValue"/>
    <span data-bind="visible:lastInputWasValid()">驗證通過</span>
</p>

var MyViewModel = function() {
    var me = this;
    me.acceptedNumericValue = ko.observable(123);
    me.lastInputWasValid = ko.observable(true);

    me.attemptedValue = ko.computed({
        read: me.acceptedNumericValue,
        write: function (value) {
            if (isNaN(value))
                me.lastInputWasValid(false);
            else {
                me.lastInputWasValid(true);
                me.acceptedNumericValue(value); // Write to underlying storage
            }
        },
        owner: me
    });
}

ko.applyBindings(new MyViewModel());

 

DEMO 5

下拉菜單

<select>常用的data-bind參數:

•options : 

指向數組或ko.observableArray()，KO會將數組元素轉換爲下拉選項。如果是ko.observableArray()，當動態增加或移除陣列元素時，下拉選項也會馬上跟着增減。

•optionsText, optionsValue :

用來產生下拉選項的數組元素可以是具有多個屬性的JavaScript對象，通過optionText, optionValue設定屬性名稱字符串，我們可以指定用哪個屬性當成<option>的文字內容，哪個屬性當成value 。

•value :

指向ViewModel的特定屬性，屬性一般以ko.observable()聲明。如此當下拉菜單選取新值，所選的<option> value值會更新到ViewModel屬性上；而一旦該屬性被程序修改或因使用者輸入改變，下拉菜單也會自動切到新值對應的<option >選項上。

•selectedOptions :

針對可多選( multiple )的<select>，selectedOptions可綁定到ko.observableArray()類型屬性，該數組使會即時反應使用者所選取的項目集合；而變更該obervableArray數組的元素項目，也會立刻變更對應option的selected狀態。

<select data-bind ="options:selectOptions, optionsText: 'name', optionsValue: 'id', value:result">
</select><br/>
排行：<span data-bind ="text:result" ></span ><br/>
<input type ="button"  value ="Third"  data-bind ="click:changeToYoung"/>

var MyViewModel = function() {
    var me = this;
    me.selectOptions = [
            {name:"First",id:1},
            {name:"Second",id:2},
            {name:"Third",id:3}
    ];
    me.result = ko.observable(2); //只能檢測 value
    me.changeToYoung = function(){
        me.result(3);  //ko.observable()聲明的屬性，使用propName("...")方式改變其值，才能通知相關UI產生聯動效果
    }
}
ko.applyBindings(new MyViewModel());

解析：

- ViewModel定義了selectOptions數組(假設選項不會動態變化，故用一般數組即可，不用ko.observableArray)，數組元素對象各有t、v兩個屬性分別當做<option>的文字跟值，而下拉菜單的選取結果要反應到result這個ko.observable()屬性上

- 爲了觀察選取結果，再增加一個<span data-bind="text: result">即時反應result內容。

- 聲明一個chageToPhone()函數，將result的值強制指定爲"Third" 。