Question

我正在创建一个包含两个复选框的表单。

如果用户选中复选框1，则应禁用2。如果选中复选框2，则应禁用1。如果用户取消选中1，则应启用2。如果用户取消选中2，则应启用1。

（我知道这可以通过一个单选按钮来完成，但是实际的用例有很多可以检查的复选框。为了简单起见，这个例子只有两个。）

换句话说，根据用户操作，将启用/禁用其余复选框。

我在这样的复选框上有一个绑定表达式：

<input type="checkbox" onclick="refreshBindings(event)" data-bind="enable: getIsEnabled(1)" value=1>
<input type="checkbox" onclick="refreshBindings(event)" data-bind="enable: getIsEnabled(2)" value=2>


var currentId=0;

functionRefreshBindings(event)
{
    currentId = event.currentTarget.value;
    //How do I get the bindings to reevaluate getIsEnabled() for each item?   
}

function getIsEnabled(id) {
    switch (+id) {

        case 1:
            if(currentId===2)
                return false;
            else return true;
        case 2:
             if(currentId===1)                 
                return false;
             else
                return true;
                }
    return true;
}

那么如何让绑定刷新？

Answer 1

使用Knockout时，尽量避免使用onclick事件和value属性。使用MVVM尽可能地依赖数据绑定。如果正确绑定它，Knockout应自动刷新启用状态。

例如，假设此视图：

<input type="checkbox" data-bind="enable: shouldBeEnabled(propA), checked: propA" /> Check 1<br />
<input type="checkbox" data-bind="enable: shouldBeEnabled(propB), checked: propB" /> Check 2<br />
<input type="checkbox" data-bind="enable: shouldBeEnabled(propC), checked: propC" /> Check 3

此ViewModel应该按照您的要求执行操作：

function ViewModel(){
    var self = this;   

    self.propA = ko.observable(false);
    self.propB = ko.observable(false);
    self.propC = ko.observable(false);

    self.shouldBeEnabled = function(myVal){
        if (myVal() === true) { return true; }
        return !self.propA() && !self.propB() && !self.propC();
    }
}

请参阅this fiddle了解演示。

如何刷新点击的绑定

1 个答案: