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）< / p>

有没有办法在TODO-collection-templ中加入TODO-templ？

Answer 1

Handlebars中有部分内容，如Mustache's：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>

HandleBars - 模板内的模板

1 个答案: