在车把中放置条件容器的干净方法是什么？

Question

当有 link 礼物时，我们想要这样的东西 HTML:

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

当没有 link 存在时，我们想要这样的东西 HTML:

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

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

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

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

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

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

Answer 1

我认为您的方向是正确的，但我建议您使用 Handlebars Partial Block 而不是 Block Helper。这将允许将一块模板（块）传递给另一块模板（部分）。

Handlebars 为我们提供了 {{> @partial-block }} 作为在中呈现模板块 的一种方式。我们可以使用它来创建我们的 "linkWrap" 部分：

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

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

对于我们希望在模板中围绕某些标记呈现 link 的任何地方，我们可以通过以下方式进行：

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

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

我创建了一个补充fiddle以供参考。

在车把中放置条件容器的干净方法是什么？

What's a clean way to have a conditional container in handlebars?

handlebars.js

handlebarshelper