javascript - Perform a not true checked binding on knockout js?

Question

i have an input type checkbox in knockout js and i whant to perform the "not true" action when this checkbox is checked. Something like this:

<input type="checkbox" data-bind="checked: !IsVisible"/> 

But this is not working. I know that i can call IsHidden and set the common checked binding, but i have a special situation in witch i need this behavior.

Answer 1

定义自定义绑定。请参阅“在 KnockoutJS 中简化和清理视图”，其中有一个部分与您所要求的内容非常非常相似。基本上，这样的事情应该可以工作（注意：未经测试）：

ko.bindingHandlers.notChecked = {
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    ko.bindingHandlers.checked.update(element, function() { return!value; });
  }
};

然后你可以这样做：

data-bind="notChecked: IsVisible"

Answer 2

您可以直接在绑定中评估 observable，您的想法应该可行。

像这样： <input type="checkbox" data-bind="checked: !IsVisible()"/>

但是请注意，这会失去“可观察性”，这可能不是您想要的。

另一种方法是创建一个IsHidden根据 IsVisible 计算的属性。

var ViewModel = function (model) {
    var self = this;
    self.IsVisible = ko.observable(model.IsVisible);
    self.IsHidden = ko.computed({
        read: function () {
            return !self.IsVisible();
        },
        write: function (newValue) {
            self.IsVisible(!newValue);
        }
    });
}

见小提琴

Answer 3

这是因为与！你正在对 observable 执行一个函数。用这个：

<input type="checkbox" data-bind="checked: !IsVisible()"/>