javascript - knockout 将绑定(bind)应用于 html 绑定(bind)内生成的绑定(bind)

Question

我在 for 循环中生成以下内容(暂时忽略 jade 模板语法):

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>'")

当我调用 .applyBindings 时，它将正确渲染我的 A 元素以及内部有绑定(bind)的 Icon。

问题:如何应用第二遍以确保动态生成的绑定(bind)现在也应用于所有 Icon 元素？

Answer 1

您不需要使用html场景绑定(bind)。

你可以直接输入你的<i>里面<a>您可以使用 KO 无容器语法来添加 name图标之前的属性:

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")

生成的 HTML 将如下所示:

<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>