Knockoutjs複選框validaton使用訂閱

我試圖驗證是否複選框應檢查與否，我使用的訂閱，但我不知道爲什麼它不工作，我試圖用一個文本框類似的邏輯和它的作品。我創建了一個小演示：Knockoutjs複選框validaton使用訂閱

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

我不知道如果我做錯了什麼。

在此先感謝。

來源

2013-11-14 Xepe

這看起來有點遞歸給我。對屬性進行訂閱，然後設置屬性。 –

我創建了這個場景，因爲我有一個複選框的列表，如果選擇了其中的2個，則不應該選擇其他的。 – Xepe

請在您的問題中添加更多詳情。你如何定義複選框以取消選擇？添加您的完整視圖模型。 – alexmac

我認爲事件在瀏覽器更新複選框之前觸發，因此即使IsSelected爲false，也會查看檢查結果。一個解決辦法是使用_.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/

來源

2013-11-14 19:21:01 Brandon

恕我直言，我不知道你想從你的代碼做什麼。但是，根據您的評論：

我創建了這種情況，因爲我有一個複選框的列表，如果選擇了其中的2個，則應該不選擇其他。

和你的小提琴，我創造了這個：

(Fiddle)

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());

這隻會告訴你，你是否有太多的選擇與否。 通知驗證約束的用戶可能是比他們已經檢查了自動取消選中框的用戶體驗更好的模式。但是，如果要強制只在一次檢查，我會使用一個變化處理，並跟蹤最近的變化，將它添加到您的視圖模型：

(Fiddle)

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：任何類似的想法，比如「檢查框是否過多」都可以表示爲一組相互關聯的數據：複選框數組，是否選中每個複選框，以及描述框當前狀態有效性的屬性。

來源

2013-11-14 19:51:21 Andrew

Knockoutjs複選框validaton使用訂閱

回答

相關問題