javascript - knockout 条件绑定(bind)(但不是 native "if"方式)

Question

我有一个看起来像这样的案例(过于简化):

<!-- ko if: readOnly() -->
<a href="url" data-bind="click: ToggleReadOnly()" />
<!-- /ko -->
<!-- ko ifnot: readOnly() -->
<a href="url" data-bind="visible: someObservable" />
<!-- /ko -->

由于周围的许多其他事情会增加测试并重复大量代码，所以我需要能够在一行中完成此操作，例如:

<a href="url" data-bind="if: readOnly() { click: ToggleReadOnly() } else: { visible: someObservable }"  />

有办法做到这一点吗？

Answer 1

您可以采取几种方法来实现这一点。每个都有自己的优点和缺点。但我会专注于使用模板。

为每个以只读模式或非只读模式呈现的状态创建一个模板。您只需向模型添加一个函数来决定使用哪个模板。

<script type="text/html" id="template-readonly-link">
    <a href="#" data-bind="click: ToggleReadOnly">ReadOnly</a>
</script>

<script type="text/html" id="template-readwrite-link">
    <a href="#" data-bind="visible: someObservable">ReadWrite</a>
</script>

<!-- ko template: { name: selectTemplate } --><!-- /ko -->

function ViewModel() {
    this.readOnly = ko.observable(true);
    this.someObservable = ko.observable(true);

    this.ToggleReadOnly = function (data, event) {
        this.readOnly(!this.readOnly());
        return false;
    }.bind(this);
    this.selectTemplate = function (data) {
        return this.readOnly()
            ? 'template-readonly-link'
            : 'template-readwrite-link';
    }.bind(this);
}

fiddle

您可以探索其他方法，例如自定义组件、自定义绑定(bind)等。但这可能是最容易实现的。