挖掘選擇選項和依賴關係

Question

我有一個選擇列表，我想根據選擇更改不同div的可見性。

<table> 
    <tbody data-bind="foreach: conditions"> 
     <tr> 
      <td> 
       <select data-bind="options: $parent.conditionTypes, optionsText: 'name', optionsValue: 'id', value: type"></select> 
      </td> 
      <td> 
       <div data-bind="visible: $parent.isGroupCondition($data)"> 
        Group list 
       </div> 
       <div data-bind="visible: $parent.isTagCondition($data)"> 
        Tag list 
       </div> 
      </td> 
      <td> 
       <select data-bind="options: $parent.conditionOperations, optionsText: 'name', optionsValue: 'id', value: operation"></select> 
      </td> 
      <td> 
       <input type="text" data-bind="attr: {value: value}" /> 
      </td> 
      <td> 
       <a href="#" data-bind="click: $parent.removeCondition.bind($parent)">remove</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

我試圖使用事件綁定「事件：{變化：$ parent.conditionTypeChanged}」，但我不知道如何觸發div的綁定火。

任何幫助，非常感謝。

編輯：JsFiddle

Answer 1

你必須讓你的type財產observable中的項目在conditions

conditions: ko.observableArray([{type: ko.observable(1), operation: 1, value: 'test'}]), 

，並使用可觀察到的在isGroupCondition和isTagCondition功能：

isGroupCondition: function (condition) { 
    return condition.type() === 2; 
}, 
isTagCondition: function (condition) { 
    return condition.type() === 1; 
}, 

因爲你的type現在是可觀察的Knockout將注意更新可見性綁定並隱藏/顯示您的div。

演示JSFiddle。