knockout.js - 动态添加的 Knockout data-bind 属性不会触发 click 事件处理程序

Question

在我的 View 模型的 viewAttached 事件中，我正在创建一个动态 anchor 元素，如下所示:

 qaItemLink = document.createElement("a");
 $(qaItemLink).attr({ 'class': 'qaTreeItem', 'href': '#', 'data-bind': 'click:$root.showQaItemDetails' });

在 UI 中 checkin 时呈现如下:

<a class="qaTreeItem" href="#" data-bind="click:$root.showQaItemDetails">Item 1</a>

我没有看到正在呈现的 anchor 标记有任何问题。没有调用函数 showQaItemDetails 的原因可能是什么？

Answer 1

如果元素是在 ko.applyBindings 之后添加的被调用，那么 Knockout 将没有机会绑定(bind)它。如果您使用 template绑定(bind)(或 with 、 foreach 等)以添加动态内容，然后 Knockout 会为您处理此问题。这通常是最好的方法。

在您的情况下，如果可能，您可以等待调用 ko.applyBindings直到添加了内容。

您也可以通过调用 ko.applyBindings(viewModel, element) 直接绑定(bind)元素.这将绑定(bind)元素及其子元素。但是，在您的情况下，我不知道您的 anchor 需要绑定(bind)什么上下文(根与某些嵌套项)。

也可以使用ko.applyBindingsToNode (或在 3.0 ko.applyBindingAccessorsToNode 中传递一个返回绑定(bind)的函数)直接应用如下绑定(bind):

ko.applyBindingsToNode(qaItemLink, { click: viewModel.showQaItemDetails }, optionalContext);