KnockoutJS 3.X API 第四章 表單綁定(12) selectedOptions、uniqueName綁定

selectedOptions綁定目的

selectedOptions綁定控制當前選擇多選列表中的哪些元素。 這旨在與<select>元素和選項綁定結合使用。

當用戶選擇或取消選擇多選列表中的項目時，這會在視圖模型上的數組中添加或刪除相應的值。 同樣，假設它是您的視圖模型上的一個observable數組，那么每當您添加或刪除（例如，通過push或splice）項到此數組時，UI中的相應項目將被選中或取消選擇。 這是一個雙向綁定。

注意：要控制選擇單選擇下拉列表中的哪個元素，可以改用value綁定。

示例

Choose some countries you'd like to visit:

源碼：

<p>
    Choose some countries you'd like to visit: 
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
</p>
 
<script type="text/javascript">
    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設置元素的選定選項以匹配數組的內容。 任何先前的選擇狀態將被覆蓋。

如果你的參數是一個observable數組，綁定將更新元素的選擇每當數組改變（例如，通過push，pop或其他observable數組方法）。 如果參數不可觀察，它將只設置元素的選擇狀態一次，並且不會在以后再次更新。

無論參數是否是可觀察的數組，KO都將檢測用戶何時選擇或取消選擇多重選擇列表中的項目，並將更新該數組以匹配。 這是您如何讀取選擇的選項。

備注：讓用戶從任意JavaScript對象中進行選擇

在上面的示例代碼中，用戶可以從字符串值數組中選擇。 如果你願意 ，你的選項數組可以包含任意的JavaScript對象。 有關如何控制任何對象在列表中的顯示方式的詳細信息，請參閱options綁定。

在這種情況下，可以使用selectedOptions讀取和寫入那些對象本身的值，而不是它們的文本表示。  您的視圖模型可以想象用戶從任意對象的數組中選擇，而不必關心這些對象如何映射到屏幕上的。

uniqueName綁定目的

uniqueName綁定確保關聯的DOM元素具有非空的名稱屬性。 如果DOM元素沒有name屬性，則此綁定將賦予它一個並將其設置為一些唯一的字符串值。

你不需要經常使用這個。 它只在少數情況下有用，例如：

• 其他技術可能取決於某些元素具有名稱的假設，即使在使用KO時名稱可能不相關。 例如，jQuery Validation目前僅驗證具有名稱的元素。 要使用Knockout UI，有時需要應用uniqueName綁定以避免混淆jQuery驗證。

• 如果他們沒有name屬性,IE 6不允許檢查單選按鈕。 大多數時候這是不相關的，因為你的單選按鈕元素將具有名稱屬性，將它們放入互斥組。 但是，為了防止您沒有添加名稱屬性，KO將在這些元素內部使用uniqueName，以確保可以檢查。

例如：

<input data-bind="value: someModelProperty, uniqueName: true" />

參數

傳遞true（或某些值為true）以啟用唯一的Name綁定，如前面的示例所示。