javascript - KnockoutJs 中的条件数据绑定(bind)

Question

我在 <tbody> 上有一个自定义绑定(bind)处理程序我只想在用户拥有 Viewmodel 的适当权限时应用。此数据绑定(bind)允许用户拖放表中的元素以重新排序列表。

如果满足某些条件，是否可以有条件地数据绑定(bind)我的自定义绑定(bind)处理程序？

基本上我想要:

<tbody data-bind="if (hasPermission){custom-binding: list}"></tbody>

这种行为可以通过 knockout 来实现吗？我认为我还可以采用其他策略，例如有一个按钮允许用户对表格进行排序(仅当他拥有正确的权限时才会显示)，但我想检查是否还有其他方法。

谢谢。

编辑

我对自己提出的解决方案感觉不太好，但它让我得到了我想要的结果:

        <!--ko if: hasPermission-->
        <tbody data-bind="foreach: list, sortableList: list">
            @Html.Partial("_FilesTabTableBody")
        </tbody>
        <!-- /ko -->
        <!--ko if: !hasPermission()-->
        <tbody data-bind="foreach: list">
            @Html.Partial("_FilesTabTableBody")
        </tbody>
        <!-- /ko -->

本质上我只是在两个地方复制 HTML..它不漂亮，但它完成了工作。感谢大家的意见。

Answer 1

自定义绑定(bind)的好处是您可以完全控制。在自定义绑定(bind)中，您可以添加另一个参数来控制绑定(bind)的行为方式。例如，您可以创建一个可见绑定(bind)，仅当另一个可观察值为 true 时才会遵守该绑定(bind):

var vm = function() {
    var me = this;

    me.canChangeVisible = ko.observable(true);
    me.showMessage = ko.observable(true);
}

ko.applyBindings(new vm());

HTML:

<div>
    <div><input type="checkbox" data-bind="checked: canChangeVisible">Can Change Visible</input></div>
    <div><input type="checkbox" data-bind="checked: showMessage">Show Message</input></div>
</div>
<div data-bind="makeVisible: showMessage, basedOn: canChangeVisible">Message</div>

在您的自定义绑定(bind)中，查看“basedOn”以查看是否应使用它:

ko.bindingHandlers.makeVisible = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var bo = allBindings.get('basedOn');
        var canChange = bo == null ? true : ko.unwrap(bo);
        if( canChange )
            ko.bindingHandlers.visible.update(element, valueAccessor, allBindings, viewModel, bindingContext);
    }
};

这是完整的jsFiddle显示这个。仅当选中“可以更改可见”时，才使用“显示消息”复选框的设置。