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> 
! 

视图模型：

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> 
 
!