Knockoutjs binding to complex html object

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?

pax162 · Accepted Answer · 2013-11-13 23:25:24Z

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/

answered Nov 13, 2013 at 23:25

pax162

4,7452 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Knockoutjs binding to complex html object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related