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>

我已尝试使用事件绑定＆＃34;事件：{change：$ parent.conditionTypeChanged}＆＃34;但是我不确定如何触发div的绑定来解雇。

非常感谢任何帮助。

编辑：JsFiddle

Answer 1

您只需在type

中的项目中设置conditions属性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。

Knockout选择选项和依赖项

1 个答案: