HandleBars - 模板内的模板

Question

我正在使用处理程序栏来创建模板.假设我正在做一个TODO列表.我有一个集合,我还需要支持添加相同风格的新TODO元素.

到目前为止,我有一个TODO模板集合:

<script id="TODO-collection-templ" type="text/x-handlerbars-template">
    <div id="collection">
        <ul>
            {{#list todos}}
                <li><span>{{this.title}}</span><span>{{this.description}}</span></li>
            {{/list}}
        </ul>
    </div>
</script>

如果我想添加新元素,那么(对我来说)唯一的方法就是创建另一个构建以下内容的模板:

<script id="TODO-templ" type="text/x-handlerbars-template">
    <li><span>{{title}}</span><span>{{description}}</span></li>
</script>

所以我最终得到了两个模板,但是那些容易出错(如果我在TODO-collection-templ中改变了一些内容而忘记对TODO-templ进行相同的更改,它将无法正确呈现Html)

有没有办法在TODO-collection-templ中包含TODO-templ？

Answer 1

Handlebars中有部分内容,如Mustache的:http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

基本上,您可以将微模板组织为部分模板,并在更大的模板中使用它:

<script id="TODO-partial" type="text/x-handlebars-template">
  <li><span>{{title}}</span><span>{{description}}</span></li>
</script>

<script id="TODO-collection-templ" type="text/x-handlebars-template">
  <div id="collection">
    <ul>
        {{#list todos}}
            {{> TODO}}
        {{/list}}
    </ul>
  </div>
</script>