2012-03-13 55 views
2

テンプレートバインディングを使用して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のデータを使用したくない場合は、そのメソッドの引数を使用したいだけです。これを行う方法はありますか?

+1

viewmodelを参照せずに達成したいことをする方法はないと思います。また、これを行うことで、バインディング機能を覆すことでノックアウトの設計目標を打ち破ることができます。 javascriptを使用して手動の要素/ html生成を行う場合は、ノックアウトを使用せずに同じ(または少ない)量のコードで行うことができます。それを価値のあるもののためにそこに投げ込むだけです。 –

+0

@QuintinRobinson - 答えとして提出する必要があります。これは、KOの誤った使い方です。これは、viewModelsまたはsubViewModelsを介して行う必要があります。 – madcapnmckay

+0

実際にはもう1つのことを明確にしましょう。 createDiv関数の引数のItemListはすでにviewModelにあります。これはviewModel階層内にあり、createDivメソッドのどこから正確にわかりません。 私が提供しているコードは、私たちが持っているものの簡略版です。 UI生成ロジックの特定の部分を抽象化し、createDivは(既にviewModelにある)項目のリストを取り、divを作成する抽象化の1つを表します。 – Amar

答えて

0

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> 
関連する問題