Question

使用模板绑定将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的数据，我只想在那里使用我的方法参数。有没有办法做到这一点？

Answer 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>

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

1 个答案: