挖掘选择选项和依赖关系

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。