Question

我有一个大型数据对象，可以生成一个包含大量长下拉菜单的表。这需要永远，所以我试图通过在初始加载时不渲染所有下拉菜单来加速表的渲染。相反，我只想按需点击/点击每个菜单。

// HTML Element
<button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="click: getTags">Tag</button>
<ul class="dropdown-menu">
    // Some HTML here
</ul>

// KO Template
<script type="text/html" id="alltags">
    <a href="#" data-bind="text: $data"></a>
</script>

// JS Code
self.getTags = function(data, event) {
    self.availableTags(data.component.available_tags())
    $(event.target).parent().find('ul').prepend('<li data-bind="template: { name: alltags, data: availableTags }"></li>')
}

我遇到的问题是DOM元素按照我的意愿被添加到div中，但对于我的生活，我无法让它执行foreach:循环并生成菜单内容。

我是否需要刷新绑定？

Answer 1

当你以这种方式添加html时，应用绑定不会触发，我会做的是。

创建加载下拉列表并将选项绑定到空数组，当click事件触发时，使用所需数据填充空数组。

补加.....

您可以创建一个模板来创建下拉列表并加载它们，然后执行类似这样的操作

<!--   ko foreach: templates -->

  <div data-bind:template:{name: tmpl, data:data}></div>
<!--     /ko  -->

然后使用setTimeout一次只加载一些，它仍然需要一段时间，但会减少你的UI。

function recursive(){
setTimeout(function(){
  // load 5 templates into template array
  check if there are more left, call recursive function to add more
 },50);
}

变得有点复杂，但我已经做了类似的事情来修复过去的UI延迟

KnockoutJS：在新附加的DOM元素中执行模板

1 个答案: