淘汰赛选择选项和依赖项

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>

我尝试使用事件绑定“event: {change: $parent.conditionTypeChanged}”，但我不确定如何触发 div 的绑定。

非常感谢任何帮助。

编辑：JsFiddle

Answer 1

您只需在conditions 中的项目中设置type 属性observable

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

并在您的 isGroupCondition 和 isTagCondition 函数中使用 observable：

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

因为您的 type 现在是可观察的 Knockout 将负责更新可见性绑定并隐藏/显示您的 div。

演示JSFiddle.