knockoutjs 7 綁定特性 補註

knockoutjs 7 綁定特性 補註

範例一 (單獨屬性)：

• 這個範例操作UI可以改變屬性值，而程式修改屬性值也可Refresh UI。

$(window).ready(function(){
//產生一個ViewModel
var  myViewModel={
   name:ko.observable('鄭多燕')  
};

//偵聽name屬性值變動
myViewModel.name.subscribe(function(newValue) {
  $('#sp').val(myViewModel.name());
});

//啟動KO綁定
ko.applyBindings(myViewModel);
});

<input type="text" data-bind="value:name" /></br>   //文字框一
<input id="sp" type="text" disabled="true" /></br>  //文字框二

結果：
    這個例子有兩個文字框，其中第一個文字框可以輸入，第二個不能，當第一個文字框改變後，會執行$('#sp').val(myViewModel.name());，如此會將現在myViewModel的name設定給第二個文字框，而結果會是文字框二的內容將會跟隨文字框一變動，由此測試可知，當UI上的值改變具有KO觀察性質的屬性值也會自改變。


再來是關於物件型態綁定
範例二 (物件型態屬性)：

• 這個範例是沒有使用with的情況，並且未對其Object的屬性下observable。
• (UI操作無法更新屬性質，而程式直接修改屬性質也無法 Refresh UI)。

$(window).ready(function(){
var  myViewModel={
    userInfo:ko.observable({name:'maggie',age:25})
};
        //啟動KO綁定
ko.applyBindings(myViewModel);

//btn按下後，將name值寫回id=sp的input

$('#btn').click(function(){
$('#sp').val(myViewModel.userInfo().name);

});

 //使用程式直接修改

$('#btn2').click(function(){
myViewModel.userInfo().name = "jeffrey";
});

});

<!--DOM-->
<input type="text" data-bind="value:userInfo().name" /></br>  //文字框一
<input id="sp" type="text" disabled="true" /></br>            //文字框二
<input id="btn" type="button" value="顯示目前name數值"/>        //取值按鈕
<input id="btn2" type="button" value="使用程式修改數值"/>        //設值按鈕


結果：
    這個範例當你將文字框一的內容改變後，然後按下取值按鈕，結果會發現name並沒有被改變，而若按下設值按鈕之後在按下取值會發現，文字框二數值會被改變成jeffrey，但是文字框不會改變，這樣使用一不注意會造成邏輯錯誤。


範例三： 

• 使用with的範例 
• (UI操作改變會同時跟改屬性，但程式直接修改屬性卻無法Refresh UI)。

$(window).ready(function(){
var  myViewModel={
    userInfo:ko.observable({name:'maggie',age:25})
};

ko.applyBindings(myViewModel);

$('#btn').click(function(){
$('#sp').val(myViewModel.userInfo().name);
});

$('#btn2').click(function(){
myViewModel.userInfo().name = "jeffrey";
});
});


<div data-bind="with:userInfo">
<input type="text" data-bind="value:name" /></br>       //文字框一 <input id="sp" type="text" disabled="true" /></br> //文字框二 <input id="btn" type="button" value="顯示目前name數值"/>  //取值按鈕 <input id="btn2" type="button" value="使用程式修改數值"/>  //設值按鈕</div>

結果：
    這個範例在文字框一修改後然後按下取值按鈕，這時候會發現文字框二的內容與文字框一一樣，代表UI操作與name有bind，但是若是按下設值按鈕再按下取值按鈕會發現，只有文字框二有改變。



範例四：

• 修改第二個範例使其UI Bind有作用，並且可直接修改程式並能RefreshUI。
• 對UI操作可以改變屬性值，而程式修改屬性值可以Refresh UI。

$(window).ready(function(){
var  myViewModel={
    userInfo:({name:ko.observable('maggie'),age:ko.observable(25)})
};

ko.applyBindings(myViewModel);

$('#btn').click(function(){
$('#sp').val(myViewModel.userInfo.name());
});

$('#btn2').click(function(){
myViewModel.userInfo.name("jeffrey");
});
});

<!--DOM -->
<input type="text" data-bind="value:userInfo.name" /></br>
<input id="sp" type="text" disabled="true" /></br>
<input id="btn" type="button" value="顯示目前name數值"/>
<input id="btn2" type="button" value="使用程式修改數值"/>

如此，所有bind互動都可正常使用。


範例五：

• 使用with
• 對UI操作可以改變屬性值，而程式修改屬性值可以Refresh UI。

$(window).ready(function(){
var  myViewModel={
     userInfo:({name:ko.observable('maggie'),age:ko.observable(25)})
};

ko.applyBindings(myViewModel);

$('#btn').click(function(){
$('#sp').val(myViewModel.userInfo.name());
});

$('#btn2').click(function(){
myViewModel.userInfo.name("jeffrey");
});
});


<!--DOM-->
<div data-bind="with:userInfo">
<input type="text" data-bind="value:name" /></br>
<input id="sp" type="text" disabled="true" /></br>
<input id="btn" type="button" value="顯示目前name數值"/>
<input id="btn2" type="button" value="使用程式修改數值"/>
</div>

note：可以的話就使用with吧，因為input上的data-bind宣告會相對簡潔，缺點在DOM上會多一層標籤包覆。