Knockoutjs checkbox validaton using subscribe

Knockoutjs checkbox validaton using subscribe

本文关键字：subscribe using validaton checkbox Knockoutjs      更新时间：2023-09-26

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

<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/

我

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

提前谢谢。

我认为该事件在浏览器更新复选框之前触发，因此即使false IsSelected它最终看起来也处于选中状态。 一种解决方法是使用 _.delay 或 setTimeout 来延迟将复选框恢复为 false：

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

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

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

我创建此方案是因为我有一个复选框列表，如果选择了其中 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的必要性。

这里最重要的事情是数据是好的，这就是为什么我们使用observable s和computed s：任何像"是否选中了太多复选框"这样的想法都可以表示为一组相互关联的数据：一个复选框数组，是否选中了每个复选框，以及描述框当前状态有效性的属性。

相关文章：