敲除数据绑定嵌套的 html 元素答案

【问题标题】：Knockout data-binding nested html elements敲除数据绑定嵌套的 html 元素
【发布时间】：2012-05-06 23:21:55
【问题描述】：

我有一个带有数据绑定文本属性到模型值的 h2 标记，并且在里面我有一个跨度标记，它也是一个模型值的数据绑定文本属性。

但是绑定模型时 span 会被替换，有没有办法附加 html。

【问题讨论】：

【解决方案1】：

在最新的淘汰赛中，您可以为 h2 文本使用虚拟元素，类似于 John Earles 解决方案，但这意味着您可以将姓氏与名字分开设置样式

<h2>
    <!-- ko text: firstName --><!-- /ko --> 
    <span data-bind="text: lastName"></span>
</h2>

【讨论】：

【解决方案2】：

通常，您会希望更改您的 HTML 以在这种情况下正常工作。但是，如果这不可能，那么您可以使用为您插入跨度的自定义绑定。

应该是这样的：

ko.bindingHandlers.insertText = {
    init: function(element, valueAccessor) {
        var span = document.createElement("span"),
            firstChild = element.firstChild;

        element.insertBefore(span, firstChild);
        ko.applyBindingsToNode(span, { text: valueAccessor() });       
    }       
};

示例：http://jsfiddle.net/rniemeyer/fLmXu/

【讨论】：

【解决方案3】：

您当前的代码将覆盖，因为“文本”绑定为该元素设置了 innerText（或 textContent），因此您的 h2 文本绑定将覆盖任何现有的嵌入 html（例如您的 span）。

你可以这样做：

<h2>
    <span data-bind="text:firstName"></span>
    <span data-bind="text:lastName "></span>
</h2>

【讨论】：

是的，我明白这一点，但我现在无法更改 html 结构。是否可以在不更改 html 结构的情况下做到这一点。