Data-bind text inside another data-bind text

The following seems not to work with knockoutjs once the div data bind replace <span> to its data-binding:

<script..>
    <div data-bind="text: name">
        <span data-bind="text: index"></span>
    </div>
<开发者_如何学Go;/script>

And the result is:

<div>My data-bind text</div>

Is possible have this nested behavior that I want? I dont want to put out the span as sibling.

When you data-bind to the text it will replace the contents of the div.

I think that your best bet would be either:

<script id="twospans" type="text/html">
    <div>
        <span data-bind="text: name"></span>
        <span data-bind="text: index"></span>
    </div>
</script>

or if you really can't handle two spans, then:

<script id="templatesyntax" type="text/html">
    <div>
        ${name}
        <span data-bind="text: index"></span>
    </div>
</script>

In the second one, the only disadvantage would be that if the name is observable and changes, then the whole template is rendered again, rather than just the text of the element.

Sample here: http://jsfiddle.net/rniemeyer/K6jdF/