Question

我有一个带有数据绑定文本属性的h2标签到模型值，里面我有一个span标签，它也是一个模型值的数据绑定文本属性。

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

Answer 1

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

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

Answer 2

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

你可以这样做：

<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/

Knockout数据绑定嵌套的html元素

3 个答案: