Handlebarsjs：使用嵌套模板渲染多个通道答案

【问题标题】：Handlebarsjs: render multiple passes with nested templatesHandlebarsjs：使用嵌套模板渲染多个通道
【发布时间】：2014-07-22 22:29:50
【问题描述】：

我看到很多东西只是将我引向部分内容，这很糟糕，因为它们必须建立在布局上下文之外。

我想做的是制作嵌套模板

例如：

<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

【问题讨论】：

我不明白这个问题.. 你为什么不能这样做？ var templ = Handlebars.compile($('#person').html()); templ({ name: 'someone special', street: 'somewhere cool'});
因为在渲染名称时，街道不存在。街道是从地址控制器/模型/视图中渲染的。但是人员模板只是吞噬了 html 或对它的任何引用我无法呈现地址。

标签： javascript handlebars.js

【解决方案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();
});

【讨论】：

这当然有效。有一天，我将不得不在一次峰会上发表演讲，讨论我们如何将事情复杂化以使事情变得更容易。

【解决方案2】：

您错过了一个关键步骤。您必须获取模板并编译它（您正在这样做），但您还必须注册部分。

实际上，您要使用的模式是部分模板 - 您将内部模板注册为部分模板，然后用人的地址数据填充它 - 有一个 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>

【讨论】：