CODEWITHSUNDEEP
javascriptknockout.js
martonx
martonx

Reputation: 2021

Knockoutjs binding to complex html object

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?

Upvotes: 0

Views: 61

Answers (1)

pax162
pax162

Reputation: 4735

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/

Upvotes: 1

Related Questions