Combining text and html by Knockout

Question

This is how i want to construct my html

<a href="#">John <i class="person"></i></a>

And with knockout.js this is what i have done.

<a data-bind="text:name"><i class="person"></i></a>

As you can guess whole elements(not just text) of anchor is removed becuse of text binding in this case whole tags inside of anchor is removed. My solution is at below.

<a data-bind="html: name() + '<i class="person"></i>'"></a>

string concat with html in data-bind is a solution but it has 2 big downside. 'name' propery is not safe so we can got html injection. Sedondly writing html inside of data-bind attributes is sucks.

Another solution is.

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a>

I know we introducing new html markup for just solution. It is what i have found best.

What is the well known solution for this problem in knockout.js ?

Can we specify to just update text not whole elements inside of it to text binding via parameters ?

Or better solution ?

Answer 1

Using the span is the preferred solution. If the text binding doesn't replace all of the content, then it is hard for it to know what to update and not update the next time that it changes. If you want to always deal with the first child node of the element, then you could write a small custom binding to help.

Here is a simple prependText binding. This would always replace the first child node of the element that contains the binding. So, you would want to ensure that the first node was at least a space.

ko.bindingHandlers.prependText = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        //replace the first child
        element.replaceChild(document.createTextNode(value), element.firstChild);
    }        
};

Use it like:

<a href="#" data-bind="prependText: name"> <span> another element</span></a>

Sample: http://jsfiddle.net/rniemeyer/5CfzH/

Answer 2

You can also use KO "containerless" notation

<!-- ko text: YourProperty -->
<!-- /ko-->

The same can be done with other bindings (such as foreach): See Part 4