templates - 如何在淘汰赛中使用模板的内部节点？

Question

我想知道是否可以按照进一步描述的方式使用淘汰赛模板。

假设案例是制作一个抽象画廊。
让模板按以下方式定义：

<div data-bind="template: {name: 'galleryTemplate', data: data}">
  <img data-bind="attr:{src:thmbn}" />
</div>

现在，在这种情况下，画廊模板可能会以以下方式定义：

<div id="galleryTemplate">
  <div data-bind="foreach: {data: items}">
     /* inner node of template from above */
  </div>
</div>

看起来不错，但我不知道如何在淘汰赛中实现它。
任何想法将不胜感激。

Answer 1

编写一个自定义绑定来尝试做你想做的事情是可能的，但不是微不足道的。

但是，我认为更简单的方法是将模板的名称传递给“galleryTemplate”，然后使用它来呈现子级。

就像是：

<div data-bind="template: {name: 'galleryTemplate', data: { templateName: 'itemTmplOne', data: data } }"></div>

<div data-bind="template: {name: 'galleryTemplate', data: { templateName: 'itemTmplTwo', data: data } }"></div>

<script id="galleryTemplate" type="text/html">
  <div data-bind="template: { name: templateName, foreach: data }"></div>
</script>​

<script id="itemTmplOne" type="text/html">
    <div>one</div>
</script>

<script id="itemTmplTwo" type="text/html">
    <div>two</div>
</script>

示例：http: //jsfiddle.net/rniemeyer/jdJPc/

Answer 2

首先，您应该定义一个template具有唯一 ID 的。你可以这样做，div但我更喜欢为此使用script标签：

<script id="galleryTemplate" type="text/html">
    <div data-bind="foreach: items">
        <img  data-bind="attr:{src:thmbn}" style="width:200px" />
    </div>
</script>

然后你在你想要的地方：

<div data-bind="template: {name: 'galleryTemplate', data: data}">
</div>

这是工作小提琴：http: //jsfiddle.net/pm7Y9/1/