Knockoutjs：動的なコンテンツとapplyBindings

Question

私はこのように私のページを取り込む "動的" 午前：

<script type="text/html" id="ContainerTemplate"> 
    <span data-bind="template: { 
        name: contentTemplate, 
        data: contentData }"></span> 
</script> 

<script type="text/html" id="fooTemplate"> 
    <span data-bind="text: barAttribute"></span> 
</script> 

<button data-bind="click: complete">complete</button> 

Hello 
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span> 
! 

のViewModel：

var viewModel = { 
    myContents: ko.observableArray([]), 
    complete: function() { 
     viewModel.myContents.push({ 
      contentTemplate:'fooTemplate', 
      contentData:{barAttribute:'world'}}); 
    } 
}; 

ko.applyBindings(viewModel); 

特殊性は、テンプレート名が動的であるということです。それは（あなたはhttp://jsfiddle.net/hPQNx/でそれを試すことができます）のように動作するようですが、私は正しくやっているのだろうかと思う。ルートや親などの一部のテンプレート機能は動作していないようです。

applyBindingsを手動で再呼び出しする必要がありますか？これは関連するDOMノードで行う必要がありますが、セットアップでこれらのノードにアクセスするにはどうしたらよいですか？

Answer 1

あなたのビューモデルにプロパティを追加し、ルートプロパティを追加して$rootと$parentという参照を使ってこのプロパティを参照する方法を示しました。実際

var viewModel = { 
 
    a: ko.observable('foo'), 
 
    myContents: ko.observableArray([]), 
 
    complete: function() { 
 
     viewModel.myContents.push({ 
 
      contentTemplate: 'fooTemplate', 
 
      b: 'goo', 
 
      contentData: { 
 
       barAttribute: 'world' 
 
      } 
 
     }); 
 
    } 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script> 
 
<script type="text/html" id="ContainerTemplate"> 
 
    <span data-bind="template: { 
 
        name: contentTemplate, 
 
        data: contentData }"></span> 
 
</script> 
 
     
 
<script type="text/html" id="fooTemplate"> 
 
    <span data-bind="text: barAttribute"></span> 
 
    <div data-bind="text: $root.a"></div> 
 
    <div data-bind="text: $parent.b"></div> 
 
</script> 
 

 
<button data-bind="click: complete">complete</button> 
 

 
Hello 
 
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span> 
 
!