Handlebars.js：像使用普通的完整模板一样使用部分模板

Question

我有一个模板，我既想将其用作部分模板，也想单独从 javascript 中使用。

Answer 1

如果您的模板是预编译的，您可以通过Handlebars.partials['partial-name']() 访问您的部分，也可以通过{{> partial}} 帮助程序从模板中调用它们。

这很好，因为您可以编写一个实用函数来渲染模板，无论它是完整模板还是部分模板。

例如：

function elementFromTemplate(template, context) {
    context = context || {};
    var temp = document.createElement('div');
    temp.innerHTML = templates[template] ? templates[template](context) : Handlebars.partials[template](context);
    return temp.firstChild;
}

myDiv.appendChild(elementFromTemplate('myPartial', context));

myDiv.appendChild(elementFromTemplate('a-whole-template'));

希望这可以帮助其他想像我一样使用 Handlebars 的人。

Answer 2

反过来更容易——将所有模板编译为普通模板，然后将它们作为部分模板使用：

Handlebars.partials = Handlebars.templates

这使得您可以像往常一样使用您的模板，也可以作为部分模板使用：

{{> normalTemplate}}

Answer 3

要从 javascript 渲染部分内容，您可以使用

Handlebars.partials["myPartial"]()

Answer 4

要使用模板中的部分内容，只需包含 {{> partialName}}。

<script id="base-template" type="text/x-handlebars-template">
  <div>
    {{> person}}  <!-- This is the partial template name -->
  </div>
</script>

<script id="partial-template" type="text/x-handlebars-template">
  <div class="person">
    <h2>{{first_name}} {{last_name}}</h2>
    <div class="phone">{{phone}}</div>
  </div>
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var template = Handlebars.compile($("#base-template").html());

    //Aliasing the template to "person"
    Handlebars.registerPartial("person", $("#partial-template").html()); 

    template(yourData);
  }
</script>