1、激活knockout
ko.applayBindings()
第一個參數是激活ko時用于聲明綁定的View Model的對象
(myViewModel= {personName: 'Bob',personAge: 123})
第二個參數是可選的，用于設置要使用data-bind屬性的html元素或容器
（ko.applayBindings(myViewModel, documentElementById("id"))）
比如：ko.applyBindings(myViewModel);

2、observables（響應一個對象）
當view model發生變化時，能夠自動更新ui界面
將model屬性聲明成observable
(myViewModel= {personName: ko.observable('Bob'),personAge: ko.observable(123)})
頁面上如果要和一個輸入框綁定起來的話，
（
<input data-bind="value: personName"/>
<span data-bind="text: personName"></span>
）
讀取observable屬性：myViewModel.personName（）

設置observable屬性：myViewModel.personName（""Mary""）

同時設置多個observable屬性：myViewModel.personName（""Mary""）.personAge（50） 鏈式語法

3、observableArray（響應一個對象的集合）
（
var myObservableArray = ko.observableArray(); // 實例化一個數組
myObservableArray.push('Some value'); // 向數組中添加記錄
myObservableArray.push('Some value');
）

==》Knockoutjs數組常用的方法如下
（1）myObservableArray.push('Some new value')：增加一個新的元素

（2）myObservableArray.pop()：刪除一個元素，并返回其值

（3）myObservableArray.unshift('Some new value')：在數組的開始處增加一個新的元素

（4）myObservableArray.shift()：刪除數組的第一個元素，并返回其值

（5）myObservableArray.reverse()：反轉數組的順序

（6）myObservableArray.sort()：數組排序。排序規則可以由用戶自己定義也可以使用默認，
默認情況下按照字母順序或者數字的順序進行排序。自己定義排序規則時需要接收數組 中的兩個元素，
并且需要返回一個數值，當此值小于0時表示第一個元素較小，當此值大于0時，表示第二個元素較小，
當等于0時表示兩個元
myObservableArray.sort(function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName &lt; right.lastName ? -1 : 1)
})
（7）myObservableArray.splice()：數組截取。例如：myObservableArray.splice(1, 3)，代表從數組的第一個元素開始，截取三個元素，并且將他們作為數組返回。
（8）myObservableArray().length()：數組的長度
（9）myObservableArray()[0]：取得數組的第一個值
（10）myObservableArray.remove(someItem)移除myObservableArray數組內所有匹配someItem的對象， 并把這些對象組成一個數組返回
（11）myObservableArray.remove(function(item) { return item.age < 18 })移除myObservableArray數組內所有年齡屬性小于18的對象，并返回這些對象組成的新數組
（12）myObservableArray.removeAll(['Chad', 132, undefined])移除myObservableArray數組內所有匹配'Chad',123, orundefined 的對象并把它們組成新數組返回
（13）myObservableArray.removeAll()移除myObservableArray數組內所有數據，并返回這些數據組成的一個新數組
然則基于下述來由，凡是推薦應用KO中的等價辦法：

（14）KO中的辦法支撐所有主流瀏覽器（比如，Javascript原生辦法indexOf在<=IE8時不正常，而KO的indexOf 能正常工作）
（15）dependency tracking
（16）語法加倍簡潔：調用KO中的辦法應用myObservableArray.push（...），調用原生Javascript中的辦法應用myObservableArray（）.push（...）

4、computed(計算屬性，依賴一個或者多個屬性)
（
法一：
function AppViewModel(){
this.fullName=ko.computed(function(){
return this.firstName()+" "+this.lastName();
},this);
}
法二：（流行）
function AppViewModel(){
var self=this;
self.firstName=ko.observable('Bob');
self.lastName=ko.observable('Smith');
self.fullName=ko.computed(function(){
return self.firstName()+" "+self.lastName();
});
}
綁定到html上：
data-bind="text: fullName"
）

5、依賴鏈工作
(1)用items監控屬性來代表一組items項

(2)另外一個selectedIndexes監控屬性來用戶已選擇項目的索引

(3)一個selectedItems依賴屬性來返回一組用戶已選擇的Item對象

(4)另外一個依賴屬性來返回true或者false，來表示selectedItems中是否包含一些屬性（如新的或尚未保存的）。一些UI元素，比如一個按鈕可以基于此值來控制其啟用或禁止。

然后，當改變items或者selectedIndexes都會影響到所有的依賴屬性鏈，然后依次更新到綁定了這些項的UI。非常的整潔和優雅。

6、可寫的計算屬性==》提供一個回調函數來實現值的寫入
（1）分解用戶輸入
比如：// 這里全名是可以寫入的，但是firstName和lastName是不可寫入的
（
function MyViewModel() {
this.firstName = ko.observable('Planet');
this.lastName = ko.observable('Earth');
this.fullName = ko.computed({
read: function () { },
write: function (value) {
varlastSpacePos = value.lastIndexOf(" ");
if (lastSpacePos > 0) {
// Ignore values with no space character
this.firstName(value.substring(0, lastSpacePos));
// Update "firstName"
this.lastName(value.substring(lastSpacePos + 1));
// Update "lastName"
}
}, owner: this
});
}
ko.applyBindings(new MyViewModel());

<p>Firstname:<span data-bind="text: firstName"></span></p>
<p>Lastname:<span data-bind="text: lastName"></span></p>
<h2>Hello,<input data-bind="value: fullName"/>!</h2>
）
（2）值轉換
（
function MyViewModel1() {
this.price = ko.observable(25.99);
this.formattedPrice = ko.computed({
read: function() {
return '$' + this.price().toFixed(2);
},
write: function(value) {
value = parseFloat(value.replace(/[^\.\d]/g, ""));
this.price(isNaN(value) ? 0 : value);
},
owner: this
});
}
ko.applyBindings(new MyViewModel1());

<input data-bind="value: formattedPrice"/>
）
（3）篩選和驗證用戶輸入 ==》監控屬性isValid來表示最后一次寫入是否合法，然后根據真假值顯示相應的提示信息
（
function MyViewModel2() {
this.acceptedNumericValue = ko.observable(123);
this.lastInputWasValid = ko.observable(true);
this.attemptedValue = ko.computed({
read: this.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
this.lastInputWasValid(false);
else {
this.lastInputWasValid(true);
this.acceptedNumericValue(value);
// Write to underlying storage
}
}, owner: this
});
}
ko.applyBindings(new MyViewModel2());

<p>Enter a numeric value:<input data-bind="value: attemptedValue"/></p>
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
<div data-bind="visible: lastInputWasValid()">That's a number!</div>
）

7、確定一個屬性是不是依賴屬性
ko.isComputed()

8、依賴屬性參考
一個依賴屬性可以通過以下方式實現：

（1）ko.computed( evaluator [, targetObject, options] )這是用于創建依賴屬性的一種最常見的方式。

evaluator--用于計算一個依賴屬性當值的方法

targetObject--如果給定，當KO調用回調函數時，定義一個值表示

this--參閱管理”this”來了解更多信息。

options--依賴屬性的參數對象。可以參看下面詳細的清單。

（2）ko.computed( options )--單一參數方式接受一個JavaScript對象或者以下任意屬性來創建一個依賴屬性

read--必需參數，傳入方法。用于運算當前依賴屬性當前值的方法。

write–可選參數，傳入方法。如果給定，將會使依賴屬性可寫這個方法接收一個外部的值來寫入到依賴屬性中。它通常是使用你自己定義的邏輯來處理傳入的值，通常將值寫入到相關的監控屬性中。

owner–可選參數，傳入對象。

傳入的對象作為this的關鍵字在KO調用read和write方法使用。

deferEvaluation–可選參數，傳入ture或者false。如果設置為true，則依賴屬性的值直到有實際訪問它之前它的值是不會重新計算的。默認情況下，依賴屬性的值在創建過程中就已經初始化了。

disposeWhen–可選參數，傳入方法。如果給出，該傳入方法將會在每一次運算結束之后被調用來釋放依賴屬性。真正的結果就是觸發依賴屬性的disposal方法。

disposeWhenNodeIsRemoved–可選參數，傳入方法。如果給出，當指定的DOM元素被KO刪除的時候依賴屬性的disposal方法會被觸發。當元素的綁定被模版或者控制流程綁定方法移除的時候，此功能是用來釋放依賴屬性。

依賴屬性提供了以下方法：

dispose()–釋放依賴屬性，清除所有的依賴訂閱。此方法非常有用，當你想停止一個依賴屬性以避免其更新或者清除一個內存中的依賴屬性而那些存在依賴關系的監控值是不會被清除的。

extend(extenders)–用于擴展依賴屬性。

getDependenciesCount()–返回依賴屬性當前依賴關系數量。

getSubscriptionsCount()–返回依賴屬性當前訂閱數量（無論是其他的依賴屬性或手動訂閱）。

isActive ()–返回依賴屬性在以后是否會被更新，一個依賴屬性如果沒有依賴關系是無效的。

peek ()–返回當前依賴屬性的值而無需創建依賴關系（可以參考peek）。

subscribe( callback [,callbackTarget, event] )–注冊一個手動訂閱來通知依賴屬性的變化。

9、數據綁定
數據綁定有三種方式：
One-Time(一次綁定)
One-Way（單向綁定）當viewModel發生變化時，ui也會隨之變化
Two-way（雙向綁定）這是最靈活的數據綁定，也是代價最大的

11、注冊自己的訂閱來通知監控屬性的變化
（
var subscription = myViewModel.personName.subscribe(function(newValue) {
console.info("The person's new name is " + newValue);
});
）

12、終止自己的訂閱：首先獲取到這個訂閱，然后調用dispose 方法即可。
（
subscription.dispose();
）

13、visable==>用來控制DOM元素的顯示和隱藏
如果參數是一個observable值，visible綁定使得元素的visible狀態隨著參數值的變化而變化。
如果參數不是observable值，visible綁定僅僅會設置元素visible狀態一次，以后不會再更新。
（
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true);
ko.applyBindings(viewModel);

<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
）
也可以使用函數或者表達式來控制元素的顯示和隱藏
（
var viewModel = {
myValues: ko.observableArray([]) // Initially empty, so message hidden
};
viewModel.myValues.push("some value"); // Now visible
ko.applyBindings(viewModel);

<div data-bind="visible: viewModel.myValues().length > 2, text: viewModel.myValues()[0]"> </div>
）

14、text綁定:通常情況下，該綁定在<span>和<em>這樣的元素上非常有用，而實際上你可以綁定任何元素。
(1) 是用函數或者表達式來決定text值
（
var viewModel = {
price: ko.observable(24.95)
};
viewModel.priceRating = ko.computed(function() {
return this.price() > 50 ? "expensive" : "affordable";
}, viewModel);
ko.applyBindings(viewModel);

<span data-bind="text: priceRating"></span>

但是如果不需要創建計算屬性的話，可以直接使用：
<span data-bind="text: price() >50 ? 'expensive' : 'affordable'"></span>
）

（2） 關于html編碼
如果直接使用:viewModel.myMessage("<i>Hello, world!</i>");不會顯示一個斜體文本，會按遠洋標簽進行輸出

（3）使用“text”而沒有一個容器元素
有時你可能需要使用Knockout在不使用多余的元素的情況下通過text綁定來設置文本內容。例如，在option元素中是不允許存在其他元素的，所以下面的綁定是無法正常工作的。
<select data-bind="foreach: items">
<option>Item<span data-bind="text: name"></span></option>
</select>
為了解決這個問題，你可以使用容器語法，它基于一個注釋元素。
<select data-bind="foreach: items">
<option>Item<!--ko text: name--><!--/ko--></option>
</select>
<!--ko-->和<!--/ko-->注釋標記作為起始和結束符，定義一個“虛擬元素”，里面包含了標記，Knockout能夠識別這種虛擬元素語法和綁定作為你需要的容器元素而存在。

15、html綁定
KO設置該參數值到元素的innerHTML屬性上，元素之前的內容將被覆蓋。
如果參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，如果不是，那元素的內容將只設置一次并且以后不在更新。
如果你傳的是不是數字或者字符串（例如一個對象或者數組），那顯示的文本將是yourParameter.toString()的等價內容。
ps: 因為該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，因為有可能引起腳本注入攻擊。如果你不確信是否安全（比如顯示用戶輸入的內容），
那你應該使用text綁定，因為這個綁定只是設置元素的text 值innerText和textContent。
（
var viewModel = {
details: ko.observable() // Initially blank
};
viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
ko.applyBindings(viewModel);

<div data-bind="html: details"></div>
）

16、css類名綁定
ps: 如果你想使用my-class class，你不能寫成這樣：
<div data-bind="css: { my-class: someValue }">...</div>
要這樣寫：
<div data-bind="css: { 'my-class': someValue }">...</div>
（
var viewModel = {
currentProfit: ko.observable(150000) // 如果大于0則刪除這個CSS class
};
當currentProfit 小于0的時候，添加profitWarning CSS class到元素上，
viewModel.currentProfit(-50);
）

17、style屬性綁定
注：應用的style的名字不是合法的JavaScript變量命名
如果你需要應用font-weight或者text-decoration，你不能直接使用，而是要使用style對應的JavaScript名稱。
錯誤：{ font-weight: someValue }; 正確：{ fontWeight: someValue }
錯誤：{ text-decoration: someValue }; 正確：{ textDecoration: someValue }
（
var viewModel = {
currentProfit: ko.observable(150000)
};
viewModel.currentProfit(-50);
ko.applyBindings(viewModel);

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">123</div>
）

18、attr屬性綁定
注：應用的屬性名字不是合法的JavaScript變量命名，比如屬性名稱是data-something的話，要記得加引號
（
var viewModel = {
url: ko.observable("year-end.html"),
details: ko.observable("Report including final year-end statistics")
};
ko.applyBindings(viewModel);

<a data-bind="attr: { href: url, title: details }">
Report
</a>
）

19、forEach綁定
（1）循環遍歷輸出某個數組、集合中的內容
（
var viewModel = {
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
],
}
ko.applyBindings(viewModel);

<select data-bind="foreach: people">
<option data-bind="text: firstName"></option>
</select>
）

（2）動態增加和刪除遍歷節點
其中： $index: 獲得當前項的位置，從0開始
$parent: 指代this,當前 綁定的模型數據 的 父模型數據.
$parentContext 指 當前 綁定的模型數據 的父模型數據的上下文.
（
function AppViewModel() {
var self = this;

self.people = ko.observableArray([
{ name: 'Bert' },
{ name: 'Charles' },
{ name: 'Denise' }
]);

self.addPerson = function () {
self.people.push({ name: "New at " + new Date() });
};

self.removePerson = function () {
self.people.remove(this);
}
}
ko.applyBindings(new AppViewModel());

<ul data-bind="foreach: people">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
<a href="#" data-bind="click: $parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>
）

（3）$data: 輸出數組中的所有元素
（
ko.applyBindings({
months: ['Jan', 'Feb', 'Mar', 'etc']
});

<ul data-bind="foreach: months">
<li>
The current item is: <b data-bind="text: $data"></b>
</li>
</ul>
）

（4）使用"as"為foreach中的元素定義別名，即使用as來為我們要遍歷的元素起一個別名
（
var viewModel = {
categories: ko.observableArray([
{ name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
{ name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
])
};
ko.applyBindings(viewModel);

<ul data-bind="foreach: { data: categories, as: 'category' }">
<li>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li>
<span data-bind="text: category.name"></span>:
<span data-bind="text: item"></span>
</li>
</ul>
</li>
</ul>
）

（5）在沒有綁定屬性的情況下使用foreach
我們就沒有一個可以綁定foreach的元素，此時我們可以通過以下的代碼來實現：
ps: 使用<!--ko--><!--/ko-->來表示循環的開始和結束，這是一個虛擬的標簽，
Knockoutjs能夠對其中的foreach進行綁定就好像你將foreach綁定到了一個真實的標簽上一樣。
（
ko.applyBindings({
myItems: ['A', 'B', 'C']
});

<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
）

（6）默認不顯示被標示為刪除的元素
有的時候我們要跳過數組中的一些元素，此時這些元素已經被標示為刪除，
但并沒有被真實刪除，這些元素當我們使用foreach輸出的時候是默認不顯示的，
如果我們想要這些元素顯示的話，我們可以使用includeDestroyed這個選項，比如：
（
<div data-bind='foreach: { data: myArray, includeDestroyed: true }'>
</div>
）

19、if binding 和 if not binding ==》 data-bind="if" / data-bind= "checked"
ps: 使用if是真正的控制html是否出現在DOM中，會修改dom結構，出于性能的考慮，不應該頻繁修改if的綁定值

使用if binding可以控制某個組件動態顯示，類似我們之前接觸到的visible屬性，不過此屬性綁定過以后就不能更改，
而if binding可以根據相應的條件控制組件是否顯示
（
ko.applyBindings({
displayMessage: ko.observable(true)
});

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
）
也可以使用if來判斷某個元素是否為null，如果為null則不會顯示
（
ko.applyBindings({
planets: [
{ name: 'Mercury', capital: null },
{ name: 'Earth', capital: { cityName: 'Barnsley'} }
]
});

<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
）
20、with binding==》使用with binding來重新定義一個上下文綁定
（
使用coords下的latitude和longitude的時候我們就不需要使用
coords.latitude來調用了，因為我們使用with:coords來指定了coords的上下文，當我們使用coords下面的屬性時就可以直接使用了

ko.applyBindings({
city: "London",
coords: {
latitude: 51.5001524,
longitude: -0.1262362
}
});
<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
Latitude: <span data-bind="text: latitude"> </span>,
Longitude: <span data-bind="text: longitude"> </span>
</p>
）

==》動態交互的例子==》沒懂
（
<form data-bind="submit: getTweets">
Twitter account:
<input data-bind="value: twitterName" />
<button type="submit">Get tweets</button>
</form>

<div data-bind="with: resultData">
<h3>Recent tweets fetched at <span data-bind="text: retrievalDate"> </span></h3>
<ol data-bind="foreach: topTweets">
<li data-bind="text: text"></li>
</ol>

<button data-bind="click: $parent.clearResults">Clear tweets</button>
</div>

<script type="text/javascript">
function AppViewModel() {
var self = this;
self.twitterName = ko.observable('@StephenFry');
self.resultData = ko.observable(); // No initial value

self.getTweets = function () {
twitterApi.getTweetsForUser(self.twitterName(), function (data) {
self.resultData({
retrievalDate: new Date(),
topTweets: data.slice(0, 5)
});
});
}

self.clearResults = function () {
self.resultData(undefined);
}
}

ko.applyBindings(new AppViewModel());
</script>
）

21、click事件
（1）不帶參
（
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
ko.applyBindings(viewModel);

<div>
You've clicked
<span data-bind="text: numberOfClicks">
</span>
times
<button data-bind="click: incrementClickCounter">
Click me
</button>
</div>
）

（2）傳參數給你的click 句柄 ==》傳一個function包裝的匿名函數
（
var viewModel = {
myClickFunction: function(opts) {
console.info(opts)
}
};
ko.applyBindings(viewModel);

<button data-bind="click: function() { viewModel.myClickFunction('ccl')}">
Click me 帶參
</button>
）

（3）訪問事件源對象
（
var viewModel = {
myFunction: function(event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
）
如果需要的話，可以使用匿名函數的第一個參數傳進去，然后在里面調用：
（
<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1') }">
Click me
</button>
）

（4）允許執行默認事件
默認情況下，Knockout會阻止冒泡，防止默認的事件繼續執行。例如，如果你點擊一個a連接，在執行完自定義事件時它不會連接到href地址。這特別有用是因為你的自定義事件主要就是操作你的view model，而不是連接到另外一個頁面。
當然，如果你想讓默認的事件繼續執行，你可以在你click的自定義函數里返回true。

（5）控制this句柄
KO在調用你定義的函數時，會將view model傳給this對象（也就是ko.applyBindings使用的view model）。主要是方便你在調用你在view model里定義的方法的時候可以很容易再調用view model里定義的其它屬性。
如果你想引用其它對象，我們有兩種方式：
你可以和（2）里那樣使用匿名函數，因為它支持任意JavaScript 對象。
你也可以直接引用任何函數對象。你可以使用bind使callback函數設置this為任何你選擇的對象。例如：
（
<button data-bind="click: someObject.someFunction.bind(someObject)">
Click me
</button>
）

（6）防止事件冒泡clickBubble: false
默認情況下，Knockout允許click事件繼續在更高一層的事件句柄上冒泡執行。
如果需要，你可以通過額外的綁定clickBubble來禁止冒泡。
（
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>
）

（7）傳遞更多的參數
如果我們想要傳遞很多參數給調用的方法的話，我們可以在標簽中包括對應方法要傳遞的參數等，如下：
（
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>
）
但是，如果我們不想要在標簽中出現這么多的內容的話，我們可以使用KO的bind方法來進行方法的傳遞，如下
（
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>
）

（8）防止事件的沖突
在默認情況下，Knockoutjs允許事件綁定從一個元素傳遞到更高一級的元素。
一個DOM元素和他的父元素都使用了click事件，如果我們點擊其中一個則兩個事件都會執行，此時，我們就可以使用“clickBubble”來制定哪個事件不執行，如下：
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

22、event綁定
event綁定在DOM元素上添加指定的事件句柄以便元素被觸發的時候執行定義的JavaScript 函數。大部分情況下是用在keypress，mouseover和mouseout上。
（
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);

<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
）

23、submit綁定
submit綁定在form表單上添加指定的事件句柄以便該form被提交的時候執行定義的JavaScript 函數。只能用在表單form元素上。
當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。換句話說，瀏覽器會執行你定義的綁定函數而不會提交這個form表單到服務器上。可以很好地解釋這個，
使用submit綁定就是為了處理view model的自定義函數的，而不是再使用普通的HTML form表單。如果你要繼續執行默認的HTML form表單操作，你可以在你的submit句柄里返回true。
（
<form data-bind="submit: doSomething">
<button type="submit">
Submit
</button>
</form>
）
為什么不在submit按鈕上使用click綁定？
==>在form上，你可以使用click綁定代替submit綁定。不過submit可以handle其它的submit行為，比如在輸入框里輸入回車的時候可以提交表單。

24、vlue綁定
（1）value綁定是關聯DOM元素的值到view model的屬性上。主要是用在表單控件<input>，<select>和<textarea>上。
不管什么時候，只要你更新了元素的值，那 KO都會將view model對應的屬性值自動更新。默認情況下當用戶離開焦點（例如onchange事件）的時候，
KO才更新這個值，但是你可以通過第2個參數valueUpdate來特別指定改變值的時機。

（2）valueUpdate
如果你使用valueUpdate參數，那就是意味著KO將使用自定義的事件而不是默認的離開焦點事件。下面是一些最常用的選項：
1/“change”（默認值） - 當失去焦點的時候更新view model的值，或者是<select> 元素被選擇的時候。
2/“keyup” – 當用戶敲完一個字符以后立即更新view model。
3/“keypress” – 當用戶正在敲一個字符但沒有釋放鍵盤的時候就立即更新view model。不像 keyup，這個更新和keydown是一樣的。
4/“afterkeydown” – 當用戶開始輸入字符的時候就更新view model。主要是捕獲瀏覽器的keydown事件或異步handle事件。
（
var viewModel = {
someValue: ko.observable("edit me")
};

<p>
Your value:
<input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
</p>
<p>
You have typed:
<span data-bind="text: someValue">
</span>
</p>
）

（3）綁定下拉菜單drop-down list（例如SELECT）
（4）更新observable和non-observable屬性值

?

轉載于:https://www.cnblogs.com/qzccl/p/6477684.html

總結

以上是生活随笔為你收集整理的knockout 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。