Data-bind text inside another data-bind text

http://stackoverflow.com/questions/5010621/data-bind-text-inside-another-data-bind-text

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-1.1.2.js"></script>
<div data-bind="template: { name: 'bad', foreach: items }"></div>

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

<div data-bind="template: { name: 'twospans', foreach: items }"></div>

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

<div data-bind="template: { name: 'templatesyntax', foreach: items }"></div>

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

JavaScript

var viewModel = {
    items: [{
        index: 1,
        name: "One"},
    {
        index: 2,
        name: "Two"}]
}

ko.applyBindings(viewModel);