数据属性与 Knockout 的双向绑定答案

【问题标题】：Bidirectional binding of data attribute with Knockout数据属性与 Knockout 的双向绑定
【发布时间】：2014-02-21 17:29:57
【问题描述】：

我有类似的东西：

HTML：

<label id="CustomerName" data-bind="text: name, attr: {'data-value': name}"></label>

脚本：

var viewModel = {
   name : ko.observable("Original Name");
}

ko.applyBindings(viewModel);

我希望能够在 jQuery 的帮助下以编程方式更改数据属性。

$("#CustomerName").data("value", "NewName");

更改数据属性的值后，我在视图模型的链接属性中看不到我的更改。

Knockout 不同步绑定到数据属性的视图模型属性是正常行为吗？

如果数据属性不是双向的，那么最好的方法是什么？隐藏领域？？你明白我不想要像文本框这样的输入字段吗？是的！啊，好吧，... :)

谢谢。

【问题讨论】：

【解决方案1】：

如果您在 Knockout 视图模型之外更改 jQuery 中的值，则必须执行以下操作：

$('#CustomerName').val('NewName'); // Works the same way as your example
$('#CustomerName').change();

由于 Knockout 在其绑定上订阅了 change() 事件，因此您必须触发 change() 事件，以便 Knockout 知道它已更改。您不需要“data-”属性，只需将文本绑定到视图模型上的可观察对象，其余的由 Knockout 处理。

【讨论】：

【解决方案2】：

您还可以通过以下方式获取元素的数据：

 ko.dataFor($("#CustomerName")[0])("NewName")

然后这样设置。

我建议您为此创建一个 bindingHandler，以使数据属性和值保持同步。您可以挂钩属性的更改事件并更新可观察对象。

【讨论】：