ノックアウトテンプレート引数リストを使用したバインド

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

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>