Question

我正在使用一个名为Jarvismenu的外部javascript库作为我的淘汰应用菜单，为了使菜单工作（点击它们时折叠/展开父菜单项），需要在菜单加载后执行脚本。 / p>

菜单如下所示：

<nav>
  <ul data-bind="foreach: reports">
    <li>
      <a href="#" data-bind="attr: {title: title}"><span class="menu-item-parent" data-bind="text:title"></span></a>
      <ul data-bind="foreach: reportItems">
        <li>
          <a href="#" data-bind="attr: {title: title}, text: title"></a>
        </li>
      </ul>
    </li>            
  </ul>
</nav>

如何在淘汰赛3.3.0中实现这一目标？

Answer 1

您可以将其他数据发送到foreach绑定中。在您的情况下，您会对afterRender选项感兴趣。

您的代码看起来像这样

<nav>
  <ul data-bind="foreach: { data: reports, afterRender: functionToCallWhenReportsRendered}">
    <li>
      <a href="#" data-bind="attr: {title: title}"><span class="menu-item-parent" data-bind="text:title"></span></a>
      <ul data-bind="foreach: { data: reportItems, afterRender: functionToCallWhenItemsRendered}">
        <li>
          <a href="#" data-bind="attr: {title: title}, text: title"></a>
        </li>
      </ul>
    </li>            
  </ul>
</nav>

以下是更多文档的链接：

http://knockoutjs.com/documentation/foreach-binding.html

Answer 2

segFault的回答有所帮助，但每次将一个项目添加到ul时，afterRender都会显着运行。我要做的是在afterRender函数中检查最后一项是否添加如下：

＆＃13;

functionToCallWhenReportsRendered: function (elements, data) {
    if ($('#unorderedListId').children().length === this.myItems().length) {
        // Execute handler
    }
}

＆＃13;

<nav>
  <ul id="unorderedListId" data-bind="foreach: { data: reports, afterRender: functionToCallWhenReportsRendered}">
    <li>
      <a href="#" data-bind="attr: {title: title}"><span class="menu-item-parent" data-bind="text:title"></span></a>
      <ul data-bind="foreach: { data: reportItems, afterRender: functionToCallWhenItemsRendered}">
        <li>
          <a href="#" data-bind="attr: {title: title}, text: title"></a>
        </li>
      </ul>
    </li>            
  </ul>
</nav>

＆＃13;

在foreach列表后运行脚本

2 个答案: