敲除綁定不使用foreach選項更新

Question

我有兩個選擇，秒選項取決於第一個選項。

這兩個選擇框都需要附加一個類，所以我不能使用options屬性。我發現這樣做的唯一方法是使用foreach方法。

我需要隨時跟蹤所選的兩個值，但第二個選擇不會在用新數據重新填充時更新其值。請看小提琴。

另一個要求是，如果通過視圖模型創建爲第二個選擇傳入的原始選項存在，我希望這是填充時的默認值。例如，在從WPA-PSK更改爲無，然後返回時的小提琴中，我希望默認選擇是MIX（傳入）而不是AES。

小提琴：Link to Fiddle

function ViewModel(security) { 
     var self = this; 

     self.authenticationMode = ko.observable(security.authenticationMode); 
     self.encryptionType = ko.observable(security.encryptionType); 

     self.authenticationModes = ko.observableArray([{translationText: "None", mode: "NONE", translationClass: "T_WPA-PSK"}, 
            {translationText: "Open", mode: "OPEN", translationClass: "T_WPA-PSK"}, 
            {translationText: "WPA-PSK", mode: "WPA-PSK", translationClass: "T_WPA-PSK"}]); 

     self.encryptionTypes = ko.computed(function() { 
      console.log(self.authenticationMode()); 
      if (self.authenticationMode() === 'OPEN') 
       return [{translationText: "WEP", type: 'WEP', translationClass: "T_WEP"}]; 
      if (self.authenticationMode() === 'WPA-PSK') 
       return [{translationText: "AES", type: 'AES', translationClass: "T_AES"}, 
         {translationText: "MIX", type: 'MIX', translationClass: "T_MIX"}]; 
      return []; 
     }); 
    } 

    ko.applyBindings(new ViewModel({authenticationMode: 'WPA-PSK', encryptionType: 'MIX'})); 


<select data-bind="value: authenticationMode, foreach: authenticationModes"> 
    <option data-bind="text: translationText, value: mode, attr: { class: translationClass }"></option> 
</select> 

<select data-bind="value: encryptionType, foreach: encryptionTypes"> 
    <option data-bind="text: translationText, value: type, attr: { class: translationClass }"></option> 
</select> 

<p>Selected Authentication: <b data-bind="text:authenticationMode"></b></p> 
<p>Selected Encryption Type: <b data-bind="text:encryptionType"></b></p> 

Fiddle Using Options - 另一種方式，我發現使用選項來設置與optionsAfterRender方法的類。

Answer 1

更新您的提琴：

http://jsfiddle.net/fS8qp/7/

兩個要求加入您的視圖模型包括下列內容：

self.defaultEncryptionType = security.encryptionType; 

self.authenticationMode.subscribe(function() { 
    self.encryptionType(self.defaultEncryptionType); // This will select the passed in encryptionType, if it exists in the current list of options 
    self.encryptionType.valueHasMutated(); // This will trigger an update of the observable 
});