使用参数列表的敲除模板绑定答案

【问题标题】：Knockout Template Binding using argument list使用参数列表的敲除模板绑定
【发布时间】：2012-03-30 01:40:37
【问题描述】：

我正在使用模板绑定将 DIV 绑定到主 div 。

 $(function () {
 function MyViewModel() {
      this.collection = {
        List: [{ name: 'amar', progress: 20 },
               { name: 'vijay', progress: 50}]
      }
}
createDiv();
ko.applyBindings(new MyViewModel());
});

var createDiv = function (ItemList) {
    var maindiv = $("<div  data-bind=\"template: { name: 'task-template', foreach: collection.List  }\" ></div>");
    maindiv.appendTo("#TestDiv");
}
<script type="text/html" id="task-template">
  <div id="Div1" style="width: 95px; height: 31px; border-width: 1px; border-style:solid; background-color: #00FF00;"  data-bind="text: name" ></div>
 </script>

上面的代码工作正常。我只想知道有什么方法可以在数据绑定模板中使用“createDiv”方法的参数“ItemList”，如下所示。

var maindiv = $("<div  data-bind=\"template: { name: 'task-template', foreach: ItemList  }\" ></div>");

我不想在模板的 foreach 中使用 MyViewModel 的数据，我只想在那里使用我的方法参数。有没有办法做到这一点？

【问题讨论】：

我不相信有一种方法可以在不参考视图模型的情况下完成您希望完成的工作。同样通过这样做，您通过破坏绑定功能来打破淘汰赛的设计目标。如果您想通过 javascript 进行手动元素/html 生成，则可以使用相同（或更少）的代码量来完成，而无需使用敲除。只是为了它的价值把它扔在那里。
@QuintinRobinson - 你应该提交这个作为答案。这是 KO 的错误用法。它应该通过 viewModels 或 subViewModels 来完成。
其实，让我再澄清一件事。 createDiv 函数参数中的 ItemList 已经存在于 viewModel 中——它位于 viewModel 层次结构的深处，我不知道 createDiv 方法内部的确切位置。我提供的代码是我们所拥有的代码的简化版本。我们已经抽象出 UI 生成逻辑的某些部分，createDiv 代表这样一种抽象，它采用项目列表（在 viewModel 中已经存在）并创建 div。
那么，问题是如何在用于创建div的KO模板中引用ItemsList？感谢您的帮助。

标签： knockout.js

【解决方案1】：

您可以在该 div 上单独调用 applyBindings。

$(function () {
 function MyViewModel() {
      this.collection = {
        List: [{ name: 'amar', progress: 20 },
               { name: 'vijay', progress: 50}]
      }
}
var vm = new MyViewModel();
ko.applyBindings(vm);
createDiv(vm.collection);
});

var createDiv = function (ItemList) {
    var maindiv = $("<div  data-bind=\"template: { name: 'task-template', foreach: ItemList  }\" ></div>");
    maindiv.appendTo("#TestDiv");
    ko.applyBindings({ItemList: ItemList}, maindiv[0]);
}
<script type="text/html" id="task-template">
  <div id="Div1" style="width: 95px; height: 31px; border-width: 1px; border-style:solid; background-color: #00FF00;"  data-bind="text: name" ></div>
</script>

【讨论】：