如何将复选框绑定到值的倒数？

我有一个情况，当我需要将一个复选框和另一个 DOM 元素的可见性绑定到我的 viewModel 的布尔属性的逆时：

<input type="checkbox" data-bind="checked: needsReview"> Not Required 
<br>
<div id="Some related text" data-bind="visible: needsReview"> other stuff here </div>

var dataFromSever = { needsReview: true };

var theModel = function (jsonData) {
    var self = this;
    ko.mapping.fromJS(jsonData, {}, self);
}

ko.applyBindings(new theModel(dataFromSever));

我的实际数据模型中有不止一个这样的属性，所以我不想创建多个ko.computed()字段。我只想绑定到"checked: !needsReview()"或者同样易于维护的东西。

有几种类似的方法可以处理这个问题。基本思想是，您需要创建一个可写的计算可观察量来绑定复选框。

您可以使用扩展器直接在模型中执行此操作，或者通过向可观察基础 (ko.observable.fn) 添加函数来执行此操作。

但是，由于您正在使用映射插件并且可能不想自定义创建对象的方式或添加其他属性，因此我认为使用自定义绑定是最佳选择。您的模型实际上不需要关心维护属性的逆，因此我们实际上可以在绑定时完成这部分。

这是一个inverseChecked绑定在实际可观察​​值和绑定之间插入可写的计算可观察值。然后，它只是使用真正的检查绑定来完成其工作。

ko.bindingHandlers.inverseChecked = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var interceptor = ko.computed({
                            read: function() {
                                return !value();
                            },
                            write: function(newValue) {
                                value(!newValue);
                            },
                            disposeWhenNodeIsRemoved: element
                        }); 

        var newValueAccessor = function() { return interceptor; };


        //keep a reference, so we can use in update function
        ko.utils.domData.set(element, "newValueAccessor", newValueAccessor);
        //call the real checked binding's init with the interceptor instead of our real observable
        ko.bindingHandlers.checked.init(element, newValueAccessor, allBindingsAccessor);
    },
    update: function(element, valueAccessor) {
        //call the real checked binding's update with our interceptor instead of our real observable
        ko.bindingHandlers.checked.update(element, ko.utils.domData.get(element, "newValueAccessor"));  
    }
};

这是一个示例：http://jsfiddle.net/rniemeyer/Kz4Tf/ http://jsfiddle.net/rniemeyer/Kz4Tf/

为您visible你可以做的绑定visible: !needsReview()