Question

Am using template binding to bind the DIV’s to main 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>

The above code is working fine. I just want to know is there any way to use “createDiv” method’s argument “ItemList” in data-bind template like below.

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

I don’t want use MyViewModel’s data in template’s foreach , i just want to use my method argument there. Is there any way to do this ?

Answer 1

You can call applyBindings on that div separately.

$(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>