CODEWITHSUNDEEP
javascriptknockout.js
Biba
Biba

Reputation: 758

knockout apply binding to generated binding inside html binding

I am generating the following in a for loop (ignore the jade template syntax for now):

ul.nav.nav-tabs(data-bind="foreach: channels", id="galery_tabs")
  li
    a(data-toggle='tab', data-bind="attr: {href: '#tab_section_' + __kb.object.cid},html: name() + ' <i class=\"icon-remove close\" data-binding=\"click: removeChannel\"></i>'")

When I call .applyBindings it will correctly render my A element with the Icon that has a binding inside.

Question: How do I make second pass apply to ensure the dynamically generated binding is now applied to all Icon elements as well?

Upvotes: 1

Views: 284

Answers (1)

nemesv
nemesv

Reputation: 139798

You don't need to use the html binding for the scenario.

You can just put your <i> inside the <a> and you can use the KO container-less syntax to add the name property before the icon:

ul.nav.nav-tabs(data-bind="foreach: channels", id="galery_tabs")
  li
    a(data-toggle='tab', data-bind="attr: {href: '#tab_section_' + __kb.object.cid}")
      // ko text: name 
      // /ko
      i.icon-remove.close(data-binding="click: removeChannel")

And the generated HTML will look like this:

<ul data-bind="foreach: channels" id="galery_tabs" class="nav nav-tabs">
  <li><a data-toggle="tab" data-bind="attr: {href: '#tab_section_' + __kb.object.cid}">
      <!-- ko text: name -->
      <!-- /ko--><i data-binding="click: removeChannel" class="icon-remove close"></i></a></li>
</ul>

Upvotes: 1

Related Questions