當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

KnockOut绑定

發布時間：2025/4/14 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 KnockOut绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 visible 綁定

目的

visible綁定到DOM元素上，使得該元素的hidden或visible狀態取決于綁定的值。

例子

You will see this message only when "shouldShowMessage" holds a true value.

</div>

var viewModel = {

shouldShowMessage: ko.observable(true) // Message initially visible

};

viewModel.shouldShowMessage(false); // ... now it's hidden

viewModel.shouldShowMessage(true); // ... now it's visible again

</script>

參數

主參數

當參數設置為一個假值時(例如：布爾值false，數字值0，或者null，或者undefined) ,該綁定將設置該元素的style.display值為none，讓元素隱藏。它的優先級高于你在CSS里定義的任何display樣式。

當參數設置為一個真值時(例如：布爾值true，或者非空non-null的對象或者數組) ,該綁定會刪除該元素的style.display值，讓元素可見。然后你在CSS里自定義的display樣式將會自動生效。

如果參數是監控屬性observable的，那元素的visible狀態將根據參數值的變化而變化，如果不是，那元素的visible狀態將只設置一次并且以后不在更新。

其它參數

無

注：使用函數或者表達式來控制元素的可見性

你也可以使用JavaScript函數或者表達式作為參數。這樣的話，函數或者表達式的結果將決定是否顯示/隱藏這個元素。例如：

You will see this message only when 'myValues' has at least one member.

</div>

var viewModel = {

myValues: ko.observableArray([]) // Initially empty, so message hidden

};

viewModel.myValues.push("some value"); // Now visible

</script>

依賴性

除KO核心類庫外，無依賴。

2 text 綁定

目的

text 綁定到DOM元素上，使得該元素顯示的文本值為你綁定的參數。該綁定在顯示或者上非常有用，但是你可以用在任何元素上。

例子

Today's message is: <span data-bind="text: myMessage"></span>

var viewModel = {

myMessage: ko.observable() // Initially blank

};

viewModel.myMessage("Hello, world!"); // Text appears

</script>

參數

主參數

KO將參數值會設置在元素的innerText (IE)或textContent(Firefox和其它相似瀏覽器)屬性上。原來的文本將會被覆蓋。

如果參數是監控屬性observable的，那元素的text文本將根據參數值的變化而更新，如果不是，那元素的text文本將只設置一次并且以后不在更新。

如果你傳的是不是數字或者字符串(例如一個對象或者數組)，那顯示的文本將是yourParameter.toString()的等價內容。

其它參數

無

注1：使用函數或者表達式來決定text值

如果你想讓你的text更可控，那選擇是創建一個依賴監控屬性(dependent observable)，然后在它的執行函數里編碼，決定應該顯示什么樣的text文本。

例如：

The item is <span data-bind="text: priceRating"></span> today.

var viewModel = {

price: ko.observable(24.95)

};

viewModel.priceRating = ko.dependentObservable(function () {

returnthis.price() >50?"expensive" : "affordable";

}, viewModel);

</script>

現在，text文本將在“expensive”和“affordable”之間替換，取決于價格怎么改變。

然而，如果有類似需求的話其實沒有必要再聲明一個依賴監控屬性(dependent observable)，你只需要按照如下代碼寫JavaScript表達式就可以了：

The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.

結果是一樣的，但我們不需要再聲明依賴監控屬性(dependent observable)。

注2：關于HTML encoding

因為該綁定是設置元素的innerText或textContent (而不是innerHTML)，所以它是安全的，沒有HTML或者腳本注入的風險。例如：如果你編寫如下代碼：

viewModel.myMessage("<i>Hello, world!</i>");

… 它不會顯示斜體字，而是原樣輸出標簽。如果你需要顯示HTML內容，請參考html綁定.

注3：關于IE 6的白空格whitespace

IE6有個奇怪的問題，如果 span里有空格的話，它將自動變成一個空的span。如果你想編寫如下的代碼的話，那Knockout將不起任何作用：

Welcome, <span data-bind="text: userName"></span> to our web site.

… IE6 將不會顯示span中間的那個空格，你可以通過下面這樣的代碼避免這個問題：

Welcome, <span data-bind="text: userName"> </span> to our web site.

IE6以后版本和其它瀏覽器都沒有這個問題

依賴性

除KO核心類庫外，無依賴。

3 html 綁定

目的

html綁定到DOM元素上，使得該元素顯示的HTML值為你綁定的參數。如果在你的view model里聲明HTML標記并且render的話，那非常有用。

例子

var viewModel = {

details: ko.observable() // Initially blank

};

viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");

// HTML content appears

</script>

參數

主參數

KO設置該參數值到元素的innerHTML屬性上，元素之前的內容將被覆蓋。

如果參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，如果不是，那元素的內容將只設置一次并且以后不在更新。

如果你傳的是不是數字或者字符串(例如一個對象或者數組)，那顯示的文本將是yourParameter.toString()的等價內容。

其它參數

無

注：關于HTML encoding

因為該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，因為有可能引起腳本注入攻擊。如果你不確信是否安全(比如顯示用戶輸入的內容)，那你應該使用text綁定，因為這個綁定只是設置元素的text 值innerText和textContent。

依賴性

除KO核心類庫外，無依賴。

4 css 綁定

目的

css綁定是添加或刪除一個或多個CSS class到DOM元素上。非常有用，比如當數字變成負數時高亮顯示。(注：如果你不想應用CSS class而是想引用style屬性的話，請參考style綁定。)

例子

Profit Information

</div>

var viewModel = {

currentProfit: ko.observable(150000)

// Positive value, so initially we don't apply the "profitWarning" class

};

viewModel.currentProfit(-50);

// Causes the "profitWarning" class to be applied

</script>

效果就是當currentProfit 小于0的時候，添加profitWarning CSS class到元素上，如果大于0則刪除這個CSS class。

參數

主參數

該參數是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應該使用這個CSS class。

你可以一次設置多個CSS class。例如，如果你的view model有一個叫isServre的屬性，

非布爾值會被解析成布爾值。例如， 0和null被解析成false，21和非null對象被解析成true。

如果參數是監控屬性observable的，那隨著值的變化將會自動添加或者刪除該元素上的CSS class。如果不是，那CSS class將會只添加或者刪除一次并且以后不在更新。

你可以使用任何JavaScript表達式或函數作為參數。KO將用它的執行結果來決定是否應用或刪除CSS class。

其它參數

無

注：應用的CSS class的名字不是合法的JavaScript變量命名

如果你想使用my-class class，你不能寫成這樣：

… 因為my-class不是一個合法的命名。解決方案是：在my-class兩邊加引號作為一個字符串使用。這是一個合法的JavaScript 對象文字(從JSON技術規格說明來說，你任何時候都應該這樣使用，雖然不是必須的)。例如,

依賴性

除KO核心類庫外，無依賴。

5 style 綁定

目的

style綁定是添加或刪除一個或多個DOM元素上的style值。比如當數字變成負數時高亮顯示，或者根據數字顯示對應寬度的Bar。(注：如果你不是應用style值而是應用CSS class的話，請參考CSS綁定。)

例子

Profit Information

</div>

var viewModel = {

currentProfit: ko.observable(150000) // Positive value, so initially black

};

viewModel.currentProfit(-50); // Causes the DIV's contents to go red

</script>

當currentProfit 小于0的時候div的style.color是紅色，大于的話是黑色。

參數

主參數

該參數是一個JavaScript對象，屬性是你的style的名稱，值是該style需要應用的值。

你可以一次設置多個style值。例如，如果你的view model有一個叫isServre的屬性，

如果參數是監控屬性observable的，那隨著值的變化將會自動添加或者刪除該元素上的style值。如果不是，那style值將會只應用一次并且以后不在更新。

你可以使用任何JavaScript表達式或函數作為參數。KO將用它的執行結果來決定是否應用或刪除style值。

其它參數

無

注：應用的style的名字不是合法的JavaScript變量命名

如果你需要應用font-weight或者text-decoration，你不能直接使用，而是要使用style對應的JavaScript名稱。

錯誤：?{ font-weight: someValue };?正確：?{ fontWeight: someValue }

錯誤：?{ text-decoration: someValue };?正確：?{ textDecoration: someValue }

參考：style名稱和對應的JavaScript 名稱列表。

依賴性

除KO核心類庫外，無依賴。

6 attr 綁定

目的

attr 綁定提供了一種方式可以設置DOM元素的任何屬性值。你可以設置img的src屬性，連接的href屬性。使用綁定，當模型屬性改變的時候，它會自動更新。

例子

Report

</a>

var viewModel = {

url: ko.observable("year-end.html"),

details: ko.observable("Report including final year-end statistics")

};

</script>

呈現結果是該連接的href屬性被設置為year-end.html， title屬性被設置為Report including final year-end statistics。

參數

主參數

該參數是一個JavaScript對象，屬性是你的attribute名稱，值是該attribute需要應用的值。

如果參數是監控屬性observable的，那隨著值的變化將會自動添加或者刪除該元素上的attribute值。如果不是，那attribute值將會只應用一次并且以后不在更新。

其它參數

無

注：應用的屬性名字不是合法的JavaScript變量命名

如果你要用的屬性名稱是data-something的話，你不能這樣寫：

… 因為data-something 不是一個合法的命名。解決方案是：在data-something兩邊加引號作為一個字符串使用。這是一個合法的JavaScript 對象文字(從JSON技術規格說明來說，你任何時候都應該這樣使用，雖然不是必須的)。例如,

依賴性

除KO核心類庫外，無依賴

7 click 綁定

目的

click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執行定義的JavaScript 函數。大部分是用在button，input和連接a上，但是可以在任意元素上使用。

例子

<div>

You've clicked <span data-bind="text: numberOfClicks"></span> times

<button data-bind="click: incrementClickCounter">Click me</button>

</div>

var viewModel = {

numberOfClicks: ko.observable(0),

incrementClickCounter: function () {

var previousCount =this.numberOfClicks();

this.numberOfClicks(previousCount +1);

}

};

</script>

每次點擊按鈕的時候，都會調用incrementClickCounter()函數，然后更新自動更新點擊次數。

參數

主參數

Click點擊事件時所執行的函數。

你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如：someObject.someFunction。

View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫incrementClickCounter?就可以了，而無需寫成：?viewModel.incrementClickCounter(盡管是合法的)。

其它參數

無

注1：傳參數給你的click 句柄

最簡單的辦法是傳一個function包裝的匿名函數：

Click me

</button>

這樣，KO就會調用這個匿名函數，里面會執行viewModel.myFunction()，并且傳進了'param1' 和'param2'參數。

注2：訪問事件源對象

有些情況，你可能需要使用事件源對象，Knockout會將這個對象傳遞到你函數的第一個參數：

Click me

</button>

var viewModel = {

myFunction: function (event) {

if (event.shiftKey) {

//do something different when user has shift key down

} else {

//do normal action

}

};

</script>

如果你需要的話，可以使用匿名函數的第一個參數傳進去，然后在里面調用：

Click me

</button>

這樣，KO就會將事件源對象傳遞給你的函數并且使用了。

注3: 允許執行默認事件

默認情況下，Knockout會阻止冒泡，防止默認的事件繼續執行。例如，如果你點擊一個a連接，在執行完自定義事件時它不會連接到href地址。這特別有用是因為你的自定義事件主要就是操作你的view model，而不是連接到另外一個頁面。

當然，如果你想讓默認的事件繼續執行，你可以在你click的自定義函數里返回true。

注4：控制this句柄

初學者可以忽略這小節，因為大部分都用不著，高級用戶可以參考如下內容：

KO在調用你定義的函數時，會將view model傳給this對象(也就是ko.applyBindings使用的view model)。主要是方便你在調用你在view model里定義的方法的時候可以很容易再調用view model里定義的其它屬性。例如： this.someOtherViewModelProperty。

如果你想引用其它對象，我們有兩種方式：

◆ 你可以和注1里那樣使用匿名函數，因為它支持任意JavaScript 對象。

◆ 你也可以直接引用任何函數對象。你可以使用bind使callback函數設置this為任何你選擇的對象。例如：

Click me

</button>

如果你是C#或Java開發人員，你可以疑惑為什么我們還要用bind函數到一個對象想，特別是像調用someObject.someFunction。原因是在JavaScript里，函數自己不是類的一部分，他們在單獨存在的對象，有可能多個對象都引用同樣的someFunction函數，所以當這個函數被調用的時候它不知道誰調用的(設置this給誰)。在你bind之前運行時是不會知道的。KO默認情況下設置this對象是view model，但你可以用bind語法重定義它。

在注1里使用匿名函數的時候沒有具體的要求，因為JavaScript代碼 someObject.someFunction()就意味著調用someFunction，然后設置this到 someObject對象上。

注5：防止事件冒泡

默認情況下，Knockout允許click事件繼續在更高一層的事件句柄上冒泡執行。例如，如果你的元素和父元素都綁定了click事件，那當你點擊該元素的時候兩個事件都會觸發的。如果需要，你可以通過額外的綁定clickBubble來禁止冒泡。例如：

Click me

</button>

</div>

默認情況下，myButtonHandler會先執行，然后會冒泡執行myDivHandler。但一旦你設置了clickBubble為false的時候，冒泡事件會被禁止。

依賴性

除KO核心類庫外，無依賴。

8 event 綁定

目的

event綁定在DOM元素上添加指定的事件句柄以便元素被觸發的時候執行定義的JavaScript 函數。大部分情況下是用在keypress，mouseover和mouseout上。

例子

<div>

Mouse over me

</div>

Details

</div>

var viewModel = {

detailsEnabled: ko.observable(false),

enableDetails: function () {

this.detailsEnabled(true);

disableDetails: function () {

this.detailsEnabled(false);

}

};

</script>

每次鼠標在第一個元素上移入移出的時候都會調用view model上的方法來toggle detailsEnabled的值，而第二個元素會根據detailsEnabled的值自動顯示或者隱藏。

參數

主參數

你需要傳入的是一個JavaScript對象，他的屬性名是事件名稱，值是你所需要執行的函數。

你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如：event: { mouseover: someObject.someFunction }。

View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫event: { mouseover: enableDetails }?就可以了，而無需寫成：?event: { mouseover: viewModel.enableDetails }?(盡管是合法的)。

其它參數

無

9 submit 綁定

目的

submit綁定在form表單上添加指定的事件句柄以便該form被提交的時候執行定義的JavaScript 函數。只能用在表單form元素上。

當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。換句話說，瀏覽器會執行你定義的綁定函數而不會提交這個form表單到服務器上。可以很好地解釋這個，使用submit綁定就是為了處理view model的自定義函數的，而不是再使用普通的HTML form表單。如果你要繼續執行默認的HTML form表單操作，你可以在你的submit句柄里返回true。

例子

... form contents go here ...

<button type="submit">Submit</button>

</div>

var viewModel = {

doSomething: function (formElement) {

// ... now do something

}

};

</script>

這個例子里，KO將把整個form表單元素作為參數傳遞到你的submit綁定函數里。你可以忽略不管，但是有些例子里是否有用，參考：ko.postJson工具。

為什么不在submit按鈕上使用click綁定?

在form上，你可以使用click綁定代替submit綁定。不過submit可以handle其它的submit行為，比如在輸入框里輸入回車的時候可以提交表單。

參數

主參數

你綁定到submit事件上的函數

你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如：submit: someObject.someFunction。

View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫submit: doSomething就可以了，而無需寫成：?submit: viewModel. doSomething(盡管是合法的)。

其它參數

無

備注：

關于如果傳遞更多的參數給submit綁定函數，或者當調用非view model里的函數的時如何控制this，請參考click綁定。所有click綁定相關的notes也都適用于submit綁定。

依賴性

除KO核心類庫外，無依賴。

10 enable 綁定

目的

enable綁定使DOM元素只有在參數值為 true的時候才enabled。在form表單元素input，select，和textarea上非常有用。

例子

<p>

I have a cellphone

</p>

<p>

Your cellphone number:

</p>

var viewModel = {

hasCellphone: ko.observable(false),

cellphoneNumber: ""

};

</script>

這個例子里，“Your cellphone number”后的text box 初始情況下是禁用的，只有當用戶點擊標簽 “I have a cellphone”的時候才可用。

參數

主參數

聲明DOM元素是否可用enabled。

非布爾值會被解析成布爾值。例如0和null被解析成false，21和非null對象被解析給true。

如果你的參數是observable的，那綁定會隨著observable值的改變而自動更新enabled/disabled狀態。如果不是，則只會設置一次并且以后不再更新。

其它參數

無

注：任意使用JavaScript表達式

不緊緊限制于變量 – 你可以使用任何JavaScript表達式來控制元素是否可用。例如,

Do something

</button>

依賴性

除KO核心類庫外，無依賴。

11 disable 綁定

目的

disable綁定使DOM元素只有在參數值為 true的時候才disabled。在form表單元素input，select，和textarea上非常有用。

disable綁定和enable綁定正好相反，詳情請參考enable綁定。

12 value 綁定

目的

value綁定是關聯DOM元素的值到view model的屬性上。主要是用在表單控件<input>，<select>和<textarea>上。

當用戶編輯表單控件的時候， view model對應的屬性值會自動更新。同樣，當你更新view model屬性的時候，相對應的元素值在頁面上也會自動更新。

注：如果你在checkbox或者radio button上使用checked綁定來讀取或者寫入元素的 checked狀態，而不是value 值的綁定。

例子

<p>Login name: <input data-bind="value: userName"/></p>

<p>Password: <input type="password" data-bind="value: userPassword"/></p>

var viewModel = {

userName: ko.observable(""), // Initially blank

userPassword: ko.observable("abc"), // Prepopulate

};

</script>

參數

主參數

KO設置此參數為元素的value值。之前的值將被覆蓋。

如果參數是監控屬性observable的，那元素的value值將根據參數值的變化而更新，如果不是，那元素的value值將只設置一次并且以后不在更新。

如果你提供的參數不是一個數字或者字符串(而是對象或者數組)的話，那顯示的value值就是yourParameter.toString() 的內容(通常沒用，所以最好都設置為數字或者字符串)。

不管什么時候，只要你更新了元素的值，那 KO都會將view model對應的屬性值自動更新。默認情況下當用戶離開焦點(例如onchange事件)的時候，KO才更新這個值，但是你可以通過第2個參數valueUpdate來特別指定改變值的時機。

其它參數

valueUpdate

如果你使用valueUpdate參數，那就是意味著KO將使用自定義的事件而不是默認的離開焦點事件。下面是一些最常用的選項：

“change”(默認值)?- 當失去焦點的時候更新view model的值，或者是<select>

“keyup”?– 當用戶敲完一個字符以后立即更新view model。

“keypress”?– 當用戶正在敲一個字符但沒有釋放鍵盤的時候就立即更新view model。不像 keyup，這個更新和keydown是一樣的。

“afterkeydown”?– 當用戶開始輸入字符的時候就更新view model。主要是捕獲瀏覽器的keydown事件或異步handle事件。

上述這些選項，如果你想讓你的view model進行實時更新，使用“afterkeydown”是最好的選擇。

例子：

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>

<p>You have typed: <span data-bind="text: someValue"></span></p>

var viewModel = {

someValue: ko.observable("edit me")

};

</script>

注1：綁定下拉菜單drop-down list(例如SELECT)

Knockout對下拉菜單drop-down list綁定有一個特殊的支持，那就是在讀取和寫入綁定的時候，這個值可以是任意JavaScript對象，而不必非得是字符串。在你讓你用戶選擇一組model對象的時候非常有用。具體例子，參考options綁定。

類似，如果你想創建一個multi-select list，參考selectedOptions綁定。

注2：更新observable和non-observable屬性值

如果你用value綁定將你的表單元素和你的observable屬性關聯起來，KO設置的2-way的雙向綁定，任何一方改變都會更新另外一方的值。

但是，如果你的元素綁定的是一個non-observable屬性(例如是一個原始的字符串或者JavaScript表達式) ,KO會這樣執行：

◆ 如果你綁定的non-observable屬性是簡單對象，例如一個常見的屬性值，KO會設置這個值為form表單元素的初始值，如果你改變form表單元素的值，KO會將值重新寫回到view mode的這個屬性。但當這個屬性自己改變的時候，元素卻不會再變化了(因為不是observable的)，所以它僅僅是1-way綁定。

◆ 如果你綁定的non-observable屬性是復雜對象，例如復雜的JavaScript 表達式或者子屬性，KO也會設置這個值為form表單元素的初始值，但是改變form表單元素的值的時候，KO不會再寫會view model屬性，這種情況叫one-time-only value setter，不是真正的綁定。

例子：

<p>First value: <input data-bind="value: firstValue"/></p>

<p>Second value: <input data-bind="value: secondValue"/></p>

<p>Third value: <input data-bind="value: secondValue.length"/></p>

var viewModel = {

firstValue: ko.observable("hello"), // Observable

secondValue: "hello, again"// Not observable

};

ko.applyBindings(viewModel);

</script>

依賴性

除KO核心類庫外，無依賴。

13 checked 綁定

目的

checked綁定是關聯到checkable的form表單控件到view model上 - 例如checkbox（<input type='checkbox'>）或者radio button（<input type='radio'>）。當用戶check關聯的form表單控件的時候，view model對應的值也會自動更新，相反，如果view model的值改變了，那控件元素的check/uncheck狀態也會跟著改變。

注：對text box，drop-down list和所有non-checkable的form表單控件，用value綁定來讀取和寫入是該元素的值，而不是checked綁定。

例子

var viewModel = {

wantsSpam: ko.observable(true) // Initially checked

};

// ... then later ...

viewModel.wantsSpam(false); // The checkbox becomes unchecked

</script>

Checkbox關聯到數組

Preferred flavors of spam:

<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors"/> Cherry</div>

<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors"/> Almond</div>

<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors"/> Monosodium Glutamate</div>

</div>

var viewModel = {

wantsSpam: ko.observable(true),

spamFlavors: ko.observableArray(["cherry", "almond"]) // Initially checks the Cherry and Almond checkboxes

};

// ... then later ...

viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox

</script>

添加radio button

Preferred flavor of spam:

<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor"/> Cherry</div>

<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor"/> Almond</div>

<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor"/> Monosodium Glutamate</div>

</div>

var viewModel = {

wantsSpam: ko.observable(true),

spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button

};

// ... then later ...

viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked

</script>

參數

主參數

KO會設置元素的checked狀態匹配到你的參數上，之前的值將被覆蓋。對參數的解析取決于你元素的類型：

對于checkbox，當參數為true的時候，KO會設置元素的狀態為checked，反正設置為unchecked。如果你傳的參數不是布爾值，那KO將會解析成布爾值。也就是說非0值和非null對象，非空字符串將被解析成true，其它值都被解析成false。

當用戶check或者uncheck這個checkbox的時候，KO會將view model的屬性值相應地設置為true或者false。

一個特殊情況是參數是一個數組，如果元素的值存在于數組，KO就會將元素設置為checked，如果數組里不存在，就設置為unchecked。如果用戶對checkbox進行check或uncheck，KO就會將元素的值添加數組或者從數組里刪除。

對于radio buttons，KO只有當參數值等于radio button value屬性值的時候才設置元素為checked狀態。所以參數應是字符串。在上面的例子里只有當view model 的spamFlavor 屬性等于“almond”的時候，該radio button才會設置為checked。

當用戶將一個radio button選擇上的時候 is selected，KO會將該元素的value屬性值更新到view model屬性里。上面的例子，當點擊value= “cherry”的選項上， viewModel.spamFlavor的值將被設置為“cherry”。

當然，最有用的是設置一組radio button元素對應到一個單個的view model 屬性。確保一次只能選擇一個radio button需要將他們的name屬性名都設置成一樣的值（例如上個例子的flavorGroup值）。這樣的話，一次就只能選擇一個了。

如果參數是監控屬性observable的，那元素的checked狀態將根據參數值的變化而更新，如果不是，那元素的value值將只設置一次并且以后不在更新。

其它參數

無

依賴性

除KO核心類庫外，無依賴。

14 options 綁定

目的

options綁定控制什么樣的options在drop-down列表里（例如：<select>）或者 multi-select 列表里（例如：<select size='6'>）顯示。此綁定不能用于<select>之外的元素。關聯的數據應是數組（或者是observable數組），<select>會遍歷顯示數組里的所有的項。

注：對于multi-select列表，設置或者獲取選擇的多項需要使用selectedOptions綁定。對于single-select列表，你也可以使用value綁定讀取或者設置元素的selected項。

例1：Drop-down list

<p>Destination country: <select data-bind="options: availableCountries"></select></p>

var viewModel = {

availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options

};

// ... then later ...

viewModel.availableCountries.push('China'); // Adds another option

</script>

例2：Multi-select list

<p>Choose some countries you'd like to visit: <select data-bind="options: availableCountries" size="5" multiple="true"></select></p>

var viewModel = {

availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])

};

</script>

例3：Drop-down list展示的任意JavaScript對象，不僅僅是字符串

<p>

Your country:

<select data-bind="options: availableCountries,

optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>

</p>

You have chosen a country with population

<span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.

</div>

// Constructor for an object with two properties

var country =function (name, population) {

this.countryName = name;

this.countryPopulation = population;

};

var viewModel = {

availableCountries: ko.observableArray([

new country("UK", 65000000),

new country("USA", 320000000),

new country("Sweden", 29000000)

]),

selectedCountry: ko.observable() // Nothing selected by default

};

</script>

例4：Drop-down list展示的任意JavaScript對象，顯示text是function的返回值

<select data-bind="options: availableCountries,

optionsText: function(item) {

return item.countryName + ' (pop: ' + item.countryPopulation + ')'

value: selectedCountry,

optionsCaption: 'Choose...'"></select>

注意例3和例4在optionsText值定義上的不同。

參數

主參數

該參數是一個數組（或者observable數組）。對每個item，KO都會將它作為一個<option> 添加到<select>里，之前的options都將被刪除。

如果參數是一個string數組，那你不需要再聲明任何其它參數。<select>元素會將每個string顯示為一個option。不過，如果你讓用戶選擇的是一個JavaScript對象數組（不僅僅是string），那就需要設置optionsText和optionsValue這兩個參數了。

如果參數是監控屬性observable的，那元素的options項將根據參數值的變化而更新，如果不是，那元素的value值將只設置一次并且以后不在更新。

其它參數

optionsCaption

有時候，默認情況下不想選擇任何option項。但是single-select drop-down列表由于每次都要默認選擇以項目，怎么避免這個問題呢？常用的方案是加一個“請選擇的”或者“Select an item”的提示語，或者其它類似的，然后讓這個項作為默認選項。

我們使用optionsCaption參數就能很容易實現，它的值是字符串型，作為默認項顯示。例如：

KO會在所有選項上加上這一個項，并且設置value值為undefined。所以，如果myChosenValue被設置為undefined（默認是observable的），那么上述的第一個項就會被選中。

optionsText

上面的例3展示的綁定JavaScript對象到option上 – 不僅僅是字符串。這時候你需要設置這個對象的那個屬性作為drop-down列表或multi-select列表的text來顯示。例如，例3中使用的是設置額外的參數optionsText將對象的屬性名countryName作為顯示的文本。

如果不想僅僅顯示對象的屬性值作為每個item項的text值，那你可以設置optionsText 為JavaScript 函數，然后再函數里通過自己的邏輯返回相應的值（該函數參數為item項本身）。例4展示的就是返回item的2個屬性值合并的結果。

optionsValue

和optionsText類似, 你也可以通過額外參數optionsValue來聲明對象的那個屬性值作為該<option>的value值。

經典場景：如在更新options的時候想保留原來的已經選擇的項。例如，當你重復多次調用Ajax獲取car列表的時候，你要確保已經選擇的某個car一直都是被選擇上，那你就需要設置optionsValue為“carId”或者其它的unique標示符，否則的話KO找不知道之前選擇的car是新options里的哪一項。

selectedOptions

對于multi-select列表，你可以用selectedOptions讀取和設置多個選擇項。技術上看它是一個單獨的綁定，有自己的文檔，請參考： selectedOptions綁定。

注：已經被選擇的項會再options改變的時候保留

當使用options綁定<select>元素的時候，如果options改變，KO將盡可能第保留之前已經被選擇的項不變（除非是你事先手工刪除一個或多個已經選擇的項）。這是因為options 綁定嘗試依賴value值的綁定（single-select列表）和selectedOptions綁定（multi-select列表）。

依賴性

除KO核心類庫外，無依賴。

15 selectedOptions 綁定

目的

selectedOptions綁定用于控制multi-select列表已經被選擇的元素，用在使用options綁定的<select>元素上。

當用戶在multi-select列表選擇或反選一個項的時候，會將view model的數組進行相應的添加或者刪除。同樣，如果view model上的這個數組是observable數組的話，你添加或者刪除任何item（通過push或者splice）的時候，相應的UI界面里的option項也會被選擇上或者反選。這種方式是2-way綁定。

注：控制single-select下拉菜單選擇項，你可以使用value綁定。

例子

<p>

Choose some countries you'd like to visit:

</p>

var viewModel = {

availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),

chosenCountries: ko.observableArray(['Germany']) // Initially, only Germany is selected

};

// ... then later ...

viewModel.chosenCountries.push('France'); // Now France is selected too

</script>

參數

主參數

該參數是數組（或observable數組）。KO設置元素的已選項為和數組里match的項，之前的已選擇項將被覆蓋。

如果參數是依賴監控屬性observable數組，那元素的已選擇項selected options項將根據參數值的變化（通過push，pop，或其它observable數組方法）而更新，如果不是，那元素的已選擇項selected options將只設置一次并且以后不在更新。

不管該參數是不是observable數組，用戶在multi-select列表里選擇或者反選的時候，KO都會探測到，并且更新數組里的對象以達到同步的結果。這樣你就可以獲取options已選項。

其它參數

無

注：支持讓用戶選擇任意JavaScript對象

在上面的例子里，用戶可以選擇數組里的字符串值，但是選擇不限于字符串，如果你愿意你可以聲明包含任意JavaScript對象的數組，查看options綁定如何顯示JavaScript對象到列表里。

這種場景，你可以用selectedOptions來讀取或設置這些對象本身，而不是頁面上顯示的option表示形式，這樣做在大部分情況下都非常清晰。view model就可以探測到你從數組對象里選擇的項了，而不必關注每個項和頁面上展示的option項是如何map的。

依賴性

除KO核心類庫外，無依賴。

16 uniqueName 綁定

目的

uniqueName綁定確保所綁定的元素有一個非空的name屬性。如果該元素沒有name屬性，那綁定會給它設置一個unique的字符串值作為name屬性。你不會經常用到它，只有在某些特殊的場景下才用到，例如：

◆ 在使用KO的時候，一些技術可能依賴于某些元素的name屬性，盡快他們沒有什么意義。例如，jQuery Validation驗證當前只驗證有name屬性的元素。為配合Knockout UI使用，有些時候需要使用uniqueName綁定避免讓jQuery Validation驗證出錯。

◆ IE 6下，如果radio button沒有name屬性是不允許被checked了。大部分時候都沒問題，因為大部分時候radio button元素都會有name屬性的作為一組互相的group。不過，如果你沒聲明，KO內部會在這些元素上使用uniqueName那么以確保他們可以被checked。

例子

參數

主參數

就像上面的例子一樣，傳入true（或者可以轉成true的值）以啟用uniqueName綁定。

其它參數

無

依賴性

除KO核心類庫外，無依賴。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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

上一篇： VMC命令 Bluemix
下一篇： VMC Command Line