Knockout数据绑定嵌套的html元素

Question

我有数据绑定文本属性的h2标记到模型值,在里面我有一个span标记,它也是模型值的数据绑定文本属性.

但是当模型绑定时,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

通常，您需要更改 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/