範例一 (單獨屬性)：
- 這個範例操作UI可以改變屬性值，而程式修改屬性值也可Refresh UI。
//產生一個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)。
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)。
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。
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上會多一層標籤包覆。
