Question

尝试使用基于两个标志的data-bind来绑定启用状态。如果flagA为真且flagB为假，我们需要启用输入框。

var viewModel = function () {
    var self = this;
    self.flagA = ko.observable(true);
    self.flagB = ko.observable(false);
    self.changeState = function () {
        self.flagA(false);
    }
}
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type='text' data-bind='enable: flagA && !flagB' />
<button data-bind='click:changeState'>changeState</button>

任何人都可以帮我找出它无法正常工作的原因吗？

我尝试使用像enable:function(){flagA && !flagB}之类的功能来完成这项工作。但它不起作用：当我使用按钮改变状态时，它没有观察到。

Answer 1

因为flagA和flagB是可观察对象（它们是函数），所以如果在表达式中使用它们，则需要在没有任何参数的情况下调用它们来获取值：

<input type='text' data-bind='enable: flagA() && !flagB()' />

演示JSFiddle。

Answer 2

尽量避免在你的观点中加入逻辑，这是一种不好的做法。为此，请添加computed变量

self.isEnabled = ko.computed(function() {
        return this.flagA() && !this.flagB()
    }, this);

并像往常一样绑定它：

<input type='text' data-bind='enable: isEnabled' />

请参阅fiddle

使用多个布尔可观察标志启用绑定

2 个答案: