4

我正在尝试验证是否应该选中一个复选框，我正在使用订阅，但我不确定它为什么不起作用，我尝试了一个带有文本字段的类似逻辑并且它有效。我创建了一个小演示：

<input type ="checkbox" data-bind="checked: IsSelected"/>
<input type ="text" data-bind="value: Name"/>

var model = {
    IsSelected : ko.observable(false), 
    Name: ko.observable("")
}
var demo = 1;
model.IsSelected.subscribe(function(value){
    if (demo == 2 && value){
        model.IsSelected(false);
    }
    demo = 2; 
});
model.Name.subscribe(function(value){
    if (value == "Set"){
        model.Name("Jose");
    }
})
  ko.applyBindings(model);

http://jsfiddle.net/Xepe/9YXTW/

我不确定我是否做错了什么。

提前致谢。

4

2 回答 2

3

I think the event fires before the browser updates the checkbox and so it ends up looking checked even though IsSelected is false. One workaround is to use _.delay or setTimeout to delay reverting your checkbox to false:

model.IsSelected.subscribe(function(value){
    if (demo == 2 && value){
        setTimeout(function () { model.IsSelected(false); }, 0);
    }
    demo = 2; 
});

http://jsfiddle.net/9YXTW/17/

于 2013-11-14T19:21:01.140 回答
2

恕我直言，我不知道您要从代码中做什么。但是，根据您的评论：

我创建了这个场景，因为我有一个复选框列表，如果选择了其中 2 个，则不应选择另一个。

和你的小提琴，我创造了这个：

（小提琴）

function CheckboxedTextbox(checkboxValue, textboxValue) {
    this.textboxValue = ko.observable(textboxValue);
    this.checkboxValue = ko.computed(function() {
        return this.textboxValue();
    }, this);
    this.isSelected = ko.observable(checkboxValue);
}

function ViewModel() {
    this.checkboxes = ko.observableArray([
        new CheckboxedTextbox(false),
        new CheckboxedTextbox(true, "Default value?"),
        new CheckboxedTextbox(false)
    ]);
    this.valid = ko.computed(function() {
        return this.checkboxes().filter(function(c) {
            return c.isSelected();
        }).length <= 2;
    }, this);
}

ko.applyBindings(new ViewModel());

它只会告诉您是否选择了太多。通知您的用户验证约束可能是比自动取消选中他们已选中的框更好的用户体验模式。但是，如果您只想强制一次检查，我会使用更改处理程序并跟踪最近的更改，将其添加到您的视图模型中：

（小提琴）

    this.lastChangedBox = ko.observable();

    this.forceQuantityChecked = function(newlyChecked) {
        setTimeout(function() {
            if (!this.valid()) {
                this.checkboxes().filter(function(c) {
                    return c.isSelected() && c !== this.lastChangedBox() && c !== newlyChecked;
                }.bind(this)).forEach(function(c) {
                    c.isSelected(false);
                });
            }
            this.lastChangedBox(newlyChecked);
        }.bind(this), 0);
    };

我们确实看到了对setTimeout.

最重要的是数据是好的，这就是我们使用observables 和computeds 的原因：任何诸如“检查的复选框是否太多”之类的想法都可以表示为一组相互关联的数据：一个复选框数组，是否每个复选框都被选中，以及一个描述框当前状态有效性的属性。

于 2013-11-14T19:51:21.110 回答