KnockoutJs 不对自定义事件做出反应答案

【问题标题】：KnockoutJs doesn't react to custom eventsKnockoutJs 不对自定义事件做出反应
【发布时间】：2014-10-01 11:53:03
【问题描述】：

我将 ViewModel 的 isChecked 属性绑定到 data-whatever 属性。这个属性的值是由 jQuery 改变的：

$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。

编辑

正如 Fisherman 建议的那样，我使用 $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>

【问题讨论】：

你能编辑问题并创建一个repro吗？这将使您的帮助变得容易得多。
KO 使用 jQuery（如果可用）来绑定事件。这是您可以调整的示例：jsfiddle.net/rniemeyer/Lf53moaa
@Jeroen 添加了重现。请看一看。
@RPNiemeyer 感谢您的示例，但这并不是我所需要的。我宁愿让我的视图模型通知绑定到属性的属性的更改。请看一下编辑。

标签： javascript jquery data-binding knockout.js

【解决方案1】：

您不能使用 jQuery 的 data() 函数设置 data 属性。查看文档：http://api.jquery.com/data/

data-属性在data属性第一次被拉取访问，然后不再被访问或变异（所有数据值然后存储在 jQuery 内部）

http://jsfiddle.net/prpL0x3j/

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

在开发者栏中查看 DOM 元素的属性——它并没有改变，即使 jQuery 的 data 值改变了。

考虑使用attr() 函数：http://api.jquery.com/attr/

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

【讨论】：

关于 jquery 数据方法的要点。但不幸的是，它仍然不起作用。请看一下编辑