javascript - knockout : Execute template in a newly appended DOM element

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: 循环并生成菜单内容。

我需要刷新绑定(bind)吗？

Answer 1

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

在加载时创建下拉菜单并将选项绑定(bind)到空数组，当单击事件触发时，用所需的数据填充空数组。

添加...

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

<!--   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 延迟