Handlebarsjs:用嵌套模板渲染多个通道

Handlebarsjs: render multiple passes with nested templates

本文关键字：通道 嵌套 Handlebarsjs      更新时间：2023-09-26

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

我要做的是创建嵌套模板

例如:

<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

这是一个no-parse帮助器的演示。要使用此功能，您需要使用至少为v2.0.0-alpha.1的版本。您可以从车把构建页面获得它。以下是详细的拉取请求。

以下是相关代码。

模板

<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();
});

你错过了关键的一步。你必须使用模板&编译它(你正在做的)，但你还必须注册部分。

你真正想要使用的模式是局部模板——你将内部模板注册为局部模板，然后用人的地址数据填充它——这里有一个很好的例子，但这也将有助于你特定的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>
相关文章：