程序化更改不會反映在挖空視圖模型

要改變與JavaScript的複選框的狀態不符合MVVM的精神。但我創建了一個通用的JavaScript庫，用於更好的標準控件，如複選框，單選按鈕或選擇框。基於以下視圖模型：程序化更改不會反映在挖空視圖模型

function MyViewModel() { 
    var self = this; 

    self.ok = ko.observable(); 

}; 

var vm = new MyViewModel(); 
ko.applyBindings(vm);

但是，當我改變編程複選框的選中狀態，我得到在淘汰賽相結合的一個問題：

document.getElementById('chk').checked = true

的變化將不會出現在的財產視圖模型。但是當我點擊複選框時，一切正常。

看http://jsfiddle.net/KWdZB/1/

有什麼解決方法嗎？

來源

2012-10-22 Ralf

你的問題是，閣上checked binding內click事件訂閱：

ko.utils.registerEventHandler(element, "click", updateHandler);

但改變checked屬性將不會觸發click事件KO將不另行通知。

如果您手動觸發click事件屬性之後更改它可以工作...

我不知道如何與做純粹的JavaScript，但使用jQuery你可以寫：

$('#chk').attr('checked', true).triggerHandler('click')

您可以在此JSFiddle中測試它。

來源

2012-10-22 10:04:39 nemesv

感謝您的回答。 – Ralf

我給它+1 :)對於純js，你可以簡單地執行'document.getElementById（'chk'）。click && document.getElementById（'chk'）。click（）' – Kato

這很正常，因爲檢查的綁定處理程序沒有訂閱檢查的更改事件，而是訂閱了單擊事件處理程序（可以在源文件上查看檢查到的綁定處理程序代碼）。

如果您需要通過單擊更改值，則必須使用ok可觀察值。

還有就是HTML

<div> 
    <input type="checkbox" id="chk" data-bind="checked: ok"/><br> 
    <input type="button" id="btnCheck" value="Check" data-bind="click: Check"/>&nbsp;&nbsp;  
    <input type="button" id="btnUnCheck" value="Uncheck" data-bind="click:Uncheck"/> 
</div> 
<div> 
    Value: <span data-bind="text: ok"></span>  
</div>

和JavaScript：

function MyViewModel() { 
    var self = this; 

    self.ok = ko.observable(); 

    self.Check = function(){ 
     self.ok(true);  
    } 

    self.Uncheck = function(){ 
     self.ok(false);    
    } 
}; 

vm = new MyViewModel(); 
ko.applyBindings(vm);

你可以看到它在這個fiddle。

來源

2012-10-22 10:05:42 Cedric

程序化更改不會反映在挖空視圖模型

回答

相關問題