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

我有一个大的数据对象，它生成一个有很多长下拉菜单的表。这需要很长时间，所以我试图通过在初始加载时不渲染所有下拉菜单来加快表的渲染速度。相反，我只想按需/单击渲染每个菜单

// 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>')
}

//HTML元素
标签

//这里有一些HTML

//KO模板
//JS代码
self.getTags=函数（数据、事件）{
self.availableTags（data.component.available_tags（））
$（event.target）.parent（）.find（'ul'）.prepend（“
”）
}

我遇到的问题是，DOM元素按照我的要求预先添加到div中，但就我而言，我无法让它执行

foreach:

循环并生成菜单内容

---

我需要刷新绑定吗？

当您以这种方式添加html时，应用绑定将不会启动，我要做的是

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

addtl

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

<!--   ko foreach: templates -->

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

---

变得有点复杂，但我过去也做过类似的事情来修复UI滞后

我的上帝。。。那太简单了！我一定花了8个小时想弄明白！必须补充的是，这并不能真正解决我的速度慢的问题。如果我在初始页面加载时渲染所有下拉列表，则渲染表大约需要5秒。如果我使用这种方法，在点击时填充一个observableArray，然后渲染一个菜单，每个菜单渲染需要2到5秒……您有多少个下拉列表，每个下拉列表中有多少个值？（大约）56个下拉列表，其中包含5到120个值（它列出了SVN服务器上可用的标记），我确信这些下拉列表会降低速度。当我注释掉呈现下拉菜单项的代码时，事情就开始了。这是很多下拉菜单。嗯，你需要同时使用它们吗？您可能可以使用if绑定在给定时间仅加载所需的绑定。

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