javascript - knockout 3.x : markup inside element referencing a named template is wiped out

Question

在 Knockout 2.x 中，可以这样写:

<div data-bind="template: { name: 'my-template', foreach: elements }">
   <div class="placeholder">&lt;- these are the array elements.</div>
</div>

这样，占位符元素就可以附加到渲染的元素上。

但是，正如我所见，Knockout 3.0 改变了这种行为:“占位符”标记只是从容器元素中删除。

这是故意的吗？有什么解决方法吗？

我立即想到的一个解决方案是在模板定义中添加“afterRender”，但这有(根据我对 KO 3.0 的实验)一个奇怪的故障:它不会触发空的“元素”数组。

预先感谢您的回答。

Answer 1

在将模板的类似用法与使用 foreach 选项进行比较时，除了确定的特定情况外，我无法渲染占位符标记。因此，我认为这可能不是预期的用途。

由于 template 绑定(bind)的 foreach 选项不提供任何无法复制的内容，因此一种选择是移动元素 到常规模板的 data 选项中，然后“手动”在“容器”元素或无容器元素内提供 foreach 标记。

• 无容器选项

  <script type="text/html" id="containerless-regular-template">
    <!-- ko foreach: $data  --> 
      <div data-bind="text:$data"></div>
    <!-- /ko -->
    <div class="placeholder">&lt;- these are the array elements.</div>    
  </script> 
  

如果您想因“占位符”的动态要求而变得更奇特，您可以在无容器 if 内的 foreach 标记末尾嵌套另一个模板调用 绑定(bind)。最外面的容器将受到限制，但内容将是动态的。

 <script type="text/html" id="my-nested-template">
    <!-- ko foreach: $data.foreach -->
      <div  data-bind="text:$data"></div>
    <!-- /ko -->
    <!-- ko if: $data.template -->
      <div data-bind="template: { name: template.name, data: template.data }"></div>
    <!--/ko -->
</script>

<div data-bind="template: { name: 'my-nested-template', data: {foreach: [],  template: {name: 'another-template-name', data: {}}} }">

<小时/>

Fiddle