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

首先，您应该定义具有唯一ID的template。您可以使用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/

Answer 2

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

但是，我认为更简单的方法是将模板名称传递给“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/

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

2 个答案: