Knockout.js绑定到复杂的html对象

Question

I have a bootstrap dropdown, with badges in the items. I think this is not so complex, but I can't do this:

<ul class="dropdown-menu" role="menu" data-bind="foreach: events">
    <li><a href="#" data-bind="text: $data.name"><span class=" badge pull-right" data-bind="text: $data.value">NUMBER FROM MODEL TOO</span></a></li>
</ul>

My problem, that binding is working li items are generated, but the li's innerHtml's have just the text, not the text + span with binded number.

How can I do this?

Answer 1

If you use the text binding on the a tag, its entire content will be replaced by $data.name. To also display the value along with the name, you can do this:

<ul class="dropdown-menu" role="menu" data-bind="foreach: events">
    <li><a href="#"><span data-bind="text: $data.name"></span><span class=" badge pull-right" data-bind="text: $data.value">NUMBER FROM MODEL TOO</span></a></li>
</ul>

Fiddle: http://jsfiddle.net/JUEth/2/