Knockout data-binding nested html elements

Question

I have h2 tag with data-bind text property to a model value and inside i have a span tag which is also a data-bind text property to a model value.

But span is getting replace when the model is binded, is there any way to append the html.

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

Answer 1

With the newest knockout you could use a virtual element for the h2 text, similar to John Earles solution but it means that you could style the last name separately to the first name

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

Answer 2

Normally, you would want to change your HTML to work properly for this scenario. However, if that is not possible, then you could use a custom binding that inserts the span for you.

It would be like:

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

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

Sample: http://jsfiddle.net/rniemeyer/fLmXu/