Knockout單擊綁定到複選框可防止jQuery控制值

如果您在窗體上有一個複選框（使用Knockout將單擊的功能綁定到該窗體上），它似乎會覆蓋複選框狀態的編程控制。Knockout單擊綁定到複選框可防止jQuery控制值

有一個小提琴在這裏展示的問題： http://jsfiddle.net/Y5Zk8/

代碼：

<input type="checkbox" id="thisFails" data-bind="click: $root.Fails" /> 
<label for="thisFails">This Fails</label> 

var SimpleModel = function() { 
     this.Fails = function() { 
     alert('clicked'); 
     $('#thisFails').attr('checked', true); 
    } 
}; 

ko.applyBindings(new SimpleModel());

現在，我清楚地知道，如果我返回true或false從我的功能，它會工作。但想象一下，我不能這麼做（這是有原因的 - 這很複雜）。爲什麼我無法控制JQuery中的框的值？

來源

2014-01-16 Matt Thrower

這是正確的小提琴嗎？ – johnnycardy

不是。就是現在。 –

它在Chrome中適用於我。 – johnnycardy

按照這個其他計算器回答：

knockout event binding

，概括爲：

允許的默認操作

默認情況下，淘汰賽將阻止事件採取任何默認的操作。例如，如果使用事件綁定來捕獲輸入標籤的按鍵事件，瀏覽器將只會調用您的處理程序函數，並且不會將該鍵的值添加到輸入元素的值中。一個更常見的例子是使用點擊綁定，在內部使用這個綁定，你的處理函數將調用，但瀏覽器不會導航到鏈接的href。此是一個有用的默認設置，因爲當您使用點擊式綁定時，通常是因爲您將鏈接用作UI的一部分，因此操縱您的視圖模型，而不是作爲常規超鏈接連接到另一個網頁頁面。

但是，如果您確實想讓默認操作繼續，只需從您的事件處理函數中返回即可。

所以默認是，除非你返回true，否則默認事件將被阻止。

如果您要控制的值是您想要控制的值，您可能會發現以下內容，有點長時間介意您和一個明確的黑客攻擊，但它很有效。

安裝在您的視圖模型可觀察到持有該複選框是否被選中或不

self.isChecked = ko.observable(false);

設置一個計算觀察到你的虛擬機將用於綁定到複選框選中的值;

self.isCheckedCp = ko.computed(function(){ 
    return self.isChecked(); 
});

綁定計算在HTML checked屬性：

<input type="checkbox" id="thisFails" data-bind="click: $root.Fails,checked:isCheckedCp" />

更改失敗的功能納入，將立即執行失敗函數完成後超時，並且在功能，設置的基本觀察到器isChecked（在本例中，它只是切換電流值）值

self.Fails = function(e) { 
     console.log('e',e.isChecked()); 
    alert('arse'); 
     console.log($('#thisFails')); 
    setTimeout(function(){ 
     console.log('set now'); 
     //this works 
     self.isChecked(!self.isChecked()); 

     //still doesn't work with the set timeout 
     $('#thisFails').attr('checked', true); 
     console.log('e',e.isChecked()); 
    }, 0); 

}

如果你通過它的執行步驟，你會看到，當它到達setTimeout console.log（'set now'）;該複選框已恢復到您點擊它時的狀態。

設置self.isChecked然後更新observable並且計算被訪問並且複選框顯示被更新。

現在工作的原因遠遠超出了我對瀏覽器及其執行路徑的瞭解，但我認爲帶有零超時值的setTimeout有效地添加了這段代碼以便在當前之後立即運行（單擊此例）功能，此鏈接進入一些細節：

Why is setTimeout(fn, 0) sometimes useful?

我不能工作了，爲什麼通過你原來的jQuery在超時函數試圖儘管當不工作檢查設置屬性。

我希望這實際上幫助你莫名其妙！

來源

2014-01-16 15:09:46

精彩如此，謝謝 - 對問題的解釋以及解釋良好的解決方法。如果我可以兩次投票贊成，我會。 –

謝謝馬特，很高興我能幫上忙。 –

Knockout單擊綁定到複選框可防止jQuery控制值

回答

相關問題