Knockout Template Binding using argument list

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 ?

I don't believe there is a way to do what you wish to accomplish without referring to the viewmodel. Also by doing this you break the design goals of knockout by subverting the binding functionality. If you want to do manual element/html generation through javascript it could be done with the same (or less) amount of code without using knockout. Just throwing that out there for what it is worth. — Quintin Robinson
@QuintinRobinson - You should submit this as the answer. This is an incorrect usage of KO. It should be done via viewModels or subViewModels. — madcapnmckay
Actually, let me clarify one more thing. The ItemList in the createDiv function argument is already there in the viewModel - it's just deep inside the viewModel hierarchy and I wouldn't know where exactly from inside the createDiv method. The code I have provided is a simplified version of what we have. We have abstracted out certain portions of the UI generation logic and createDiv represents one such abstraction that takes a list of items (that's already there in the viewModel) and creates divs. — Amar
So, the question is how to reference the ItemsList in the KO template used to create the divs? Thanks for your help. — Amar

Michael Best Michael Best · Accepted Answer · 2012-05-01T21:33:09

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>

Knockout Template Binding using argument list

1 Answers