KnockoutJs不會對自定義事件做出反應

我將我的ViewModel的isChecked屬性綁定到data-whatever屬性。此屬性的值由jQuery的改變：KnockoutJs不會對自定義事件做出反應

$element.data('whatever', "true")

KnockoutJs沒有注意到這個變化，我的ViewModel的屬性不會改變。我如何讓KnockoutJs注意到它？

我想類似的東西，但它沒有工作：

JavaScript的「視圖層」的劇本：

$element.data('whatever', "true") 
$element.trigger("myCustomEvent")

的觀點：

<div data-bind="attr: { 'data-whatever': isChecked, event : {myCustomEvent: checkedFunction} }">

checkedFunction只是一個空方法在ViewModel中適合事件綁定語法。它仍然看起來像KnockoutJs不聽myCustomEvent。

編輯

由於漁人建議我用$element.attr代替$element.data，但它仍然不能正常工作：

<html> 
<div id="test" data-bind="attr: { 'data-whatever': isChecked }">my div</div> 

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script> 
<script> 
var vm = { 
    isChecked : ko.observable("one"), 
}; 

$(function() { 
    ko.applyBindings(vm); 
    console.log($('#test').attr('data-whatever')); // "one" 
    $('#test').attr('data-whatever', 'two'); 
    console.log($('#test').attr('data-whatever')); // "two" 
    console.log(vm.isChecked()); // // "one" again, thouh it should be "two" 
}); 

</script> 
</html>

即使我添加事件：

<html> 
<div id="test" data-bind="attr: { 'data-whatever': isChecked, event :{ myCustomEvent : aFunction }}">my div</div> 

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script> 
<script> 
var vm = { 
    isChecked : ko.observable("one"), 
    aFunction : function(){ } 
}; 

vm.isChecked.subscribe(function(){ 
    console.log("hit the event"); // never happens 
}); 

$(function() { 
    ko.applyBindings(vm); 
    console.log($('#test').attr('data-whatever')); // "one" 
    $('#test').attr('data-whatever', 'two'); 
    $('#test').trigger('myCustomEvent'); 
    console.log($('#test').attr('data-whatever')); // "two" 
    console.log(vm.isChecked()); // "one" again, though should be "two" 
}); 

</script> 
</html>

來源

2014-10-01 gisek

你能編輯的問題，並創建一個[攝製]（http://sscce.org）？這會幫助你更輕鬆。 – Jeroen 2014-10-01 12:34:15

KO使用jQuery（如果可用）綁定到事件。這裏是你可以調整的示例：http://jsfiddle.net/rniemeyer/Lf53moaa/ – 2014-10-01 13:37:39

@Jeroen添加了repro。請看一下。 – gisek 2014-10-01 16:43:15

您無法使用jQuery的data()函數設置data屬性秒。看一看文檔：http://api.jquery.com/data/

數據 - 屬性被拉在第一時間將數據屬性訪問，然後不再訪問或突變（所有數據值然後存儲在內部的jQuery）

http://jsfiddle.net/prpL0x3j/

console.log($('#test').data('whatever')); 
// one 
$('#test').data('whatever', 'two'); 
console.log($('#test').data('whatever')); 
// two

退房的開發商欄中的DOM元素的屬性 - 它不會改變，甚至ŧ hough jQuery的data值改變了。

考慮使用attr()功能：http://api.jquery.com/attr/

$element.attr('data-whatever', "true")

來源

2014-10-01 13:42:47 fischerman

關於jquery數據方法的好處。但不幸的是，它仍然無法正常工作。請看看編輯 – gisek 2014-10-01 16:45:12

KnockoutJs不會對自定義事件做出反應

回答

相關問題