Question

我看到很多东西只是让我感觉很糟糕，因为它们必须建立在布局环境之外。

我想要做的是制作嵌套模板

例如：

<div id="person">
  {{name}}
  <div id="address">
    {{street}}
  </div>
</div>

<script>
  var outer = Handlebars.compile($('#person').html());
  outer({ name: 'someone special' });

  var inner = Handlebars.compile($('#address').html());
  inner({ street: 'somewhere cool' });
</script>

当运行它时，内部模板永远不会被渲染，因为外部模板会吞噬它。

如果您可以命名这样的嵌套模板，那就太好了：

{{> name}}
<div id="person">
  {{name}}
  {{> address}}
  <div id="address">
    {{street}}
  </div>
  {{/> address}}
</div>
{{/> name}}

<script>
  var outer = Handlebars.compile($('#person').html(), 'name');
  outer({ name: 'someone special' });

  var inner = Handlebars.compile($('#address').html(), 'address');
  inner({ street: 'somewhere cool' });
</script>

或类似的东西，这样当外部渲染时，它将保留地址，并让内部渲染地址本身而不从DOM中删除它。

这样的事情可能吗？

这个问题的原因是我使用主干并希望将所有小视图分开，但它会编译成一个文件。当外部用车把模板化时，其他一切都会破裂。我不想使用部分内容，因为它只是为设计师提取html文档的所有内容。

修改

我认为我真正需要的是一种做{{noparse}}的方法，并且从registerHelper只返回noparse标签之间的原始html

Answer 1

<强> Here is a demo of a no-parse helper 即可。要使用此功能，您需要使用至少v2.0.0-alpha.1的版本。您可以从把手build page获取它。 Here is the pull request that details about it

以下是相关代码。

模板

<script id="template" type="text/x-handlebars-template">
  <div id="person">
  {{name}}
    {{{{no-parse}}}}
      <div id="address">
        {{street}}
      </div>
    {{{{/no-parse}}}}
  </div>
</script>

Handlebars.registerHelper('no-parse', function(options) {
  return options.fn();
});

Answer 2

你错过了关键的一步。你必须采取模板＆amp;编译它（你正在做的），但你也必须注册部分。

您要使用的模式实际上是部分模板 - 您将内部模板注册为部分模板，然后将其填入人员的地址数据 - 有一个great example here，但这也是将有助于您的特定HTML设置。

<script id="person-template" type="text/x-handlebars-template">
 {{#each person}}
   {{name}}
   {{> address}}
 {{/each}}
</script>   

<script id="address-partial" type="text/x-handlebars-template">
   <div class="address">
        <h2>{{street}}</h2>
  </div>
</script>

<script type="text/javascript">
    $(document).ready(function() {

    var template = Handlebars.compile($("#person-template").html());
    Handlebars.registerPartial("address", $("#address-partial").html());

    template({ name: 'someone special', street: 'somewhere cool' });
  }
</script>

Handlebarsjs：使用嵌套模板渲染多个传递

修改

2 个答案: