Knockout.js text binding in child node

Question

I'm quite new to knockout.js and I couldn't find an answer for this question.

I'm trying to create something like

<td>DEMO<span>DEMO2</span></td>

But I'm not sure how to do it with knockout.js. I tried the following, but it didn't work:

<td data-bind="text: type"><span data-bind="text: type2"></span></td>     

It seems text:type is overriding the span and it doesn't even appear.

Answer 1

Yes, you cannot have your text binding on the td because it completly overrides the content of your td

From the documentation:

Knockout sets the element’s content to a text node with your parameter value. Any previous content will be overwritten.

Solutions:

Use an extra span:

<td><span data-bind="text: type"></span><span data-bind="text: type2"></span></td> 

Use the contenerless syntax of KO:

<td><!-- ko text: type --><!-- /ko --><span data-bind="text: type2"></span></td> 

Demo JSFiddle.