knockout.js - 敲除数据绑定嵌套的 html 元素

Question

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

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

http://jsfiddle.net/WKnWr/1/

Answer 1

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

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

Answer 2

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

你可以这样做：

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

Answer 3

通常，您会希望更改您的 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/