在 td 中锚定数据绑定 - knockoutjs答案

【问题标题】：Anchor data binding inside a td - knockoutjs在 td 中锚定数据绑定 - knockoutjs
【发布时间】：2018-05-08 13:13:55
【问题描述】：

我正在将 KnockoutJS 用于 Web 应用程序。使用 foreach 数据绑定绑定表，使用 text 属性绑定表列。我有一个列绑定如下 -

<td data-toggle="tooltip" data-html="true" data-placement="top" data-
bind="html:codesAllopening,attr: {'data-original-title': 
AllOpeningCodeToolTip()}"></td>

codesAllopening 是使用以下代码动态创建的 -

self.codesAllopening = ko.computed(function () {
    var codes = self.OpeningCode.Code() + '<a data-bind="click: function() {$root.cancelOpeningCode();}" style="cursor:default;"><i class="material-icons">close</i></a><br/>';

return codes;
}, self);

这里，codesAllopening里面的点击绑定没有被触发。

提前感谢您的帮助。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

data-bind 在你 applyBindings 时被解析，所以 ko 不会解析这个，因为它是后来添加的。

knockout data-bind on dynamically generated elements

【讨论】：

好的..谢谢。我将尝试通过上述链接提供的选项。
我浏览了上面提供的link，并使用ko.bindingHandlers['html'] = { //'init': function() { // return { 'controlsDescendantBindings': true }; // this line prevents parse "injected binding" //}, 'update': function (element, valueAccessor) { // setHtml will unwrap the value if needed ko.utils.setHtml(element, valueAccessor()); } };解决了

【解决方案2】：

任何动态添加的带有剔除绑定之后 applyBindings() 被调用将不起作用。在您的情况下，无需使用 html 绑定。您可以在加载时将锚点和跨度添加到 td：

<td data-toggle="tooltip" data-html="true" data-placement="top" data- bind="attr: {'data-original-title': AllOpeningCodeToolTip()}">
    <span data-bind="html:$parent.OpeningCode.Code"></span>
    <a data-bind="click: $root.cancelOpeningCode" style="cursor:default;"><i class="material-icons">close</i></a><br/>
</td>

有一些很好的解决方案in this question 用于使用自定义绑定处理程序

【讨论】：

感谢您的快速回复。但是 OpneingCode 有很多代码，我想分别为每个代码设置取消图标。这就是为什么我试图通过 javascript 代码放置锚点。
@Raj OpeningCode.Code() 返回的字符串是否也有敲除绑定？
没有。它返回纯字符串。
@Raj 字符串包含 HTML 标签还是纯文本？
HTML 标签。实际上添加了一个标签来显示代码列表。