handlebars.js - 在 Handlebars 中放置条件容器的干净方法是什么？

Question

当存在链接时，我们需要类似这样的 HTML:

<a href="{{url}}" title="{{title}}" target="_blank"><img src="{{src}}"></img></a>

当没有链接时，我们需要像这样的 HTML:

<img src="{{src}}"></img>

有没有一种干净的方法可以做到这一点？我认为以下解决方案很糟糕，因为必须分别记住打开和关闭 <a> 是很危险的标签:

{{#if url}}<a href="{{url}}" title="{{title}}" target="_blank">{{/if}}
  <img src="{{src}}">
{{#if url}}</a>{{/if}}

我考虑过使用 block 助手，但想不出如何在不增加更多复杂性的情况下做到这一点。也许是这样的:

{{#linkWrap url}}<img src="{{src}}">{{/linkWrap}}

但是很难看出我们如何设置 title和target一切都变得尴尬。

Answer 1

我认为您的方向是正确的，但我建议使用 Handlebars Partial Block而不是 block 助手。这将允许将一 block 模板( block )传递到另一 block 模板，并由另一 block 模板对其进行包装(部分)。

Handlebars 为我们提供了 {{> @partial-block }} 作为在局部中渲染模板 block 的方法。我们可以用它来创建我们的“linkWrap”部分:

{{#if link}}
    <a href="{{link.url}}" target="{{link.target}}" title="{{link.title}}">
        {{> @partial-block}}
    </a>
{{else}}
    {{> @partial-block}}
{{/if}}

这为我们提供了一个干净简单的部分，只要我们有一个要传递的 link 对象，它就允许我们用链接包装模板的任何部分我们的部分。请注意，我选择使用一个对象来表示链接，以便我可以将单个参数传递给部分，而不是单独传递 url、title 等属性.

对于我们希望在模板中的某些标记周围呈现链接的任何地方，我们可以通过以下方式执行此操作:

{{#> linkWrap link=link}}
    <img src="{{image.src}}">
{{/linkWrap}}

如果link对象为null或undefined，则img元素将在没有父 anchor 元素的情况下呈现。

我创建了一个补充fiddle供引用。