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}}

我考虑过使用块帮助器，但是如果不增加更多的复杂性就无法想到如何操作。也许是这样的：

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

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

Answer 1

我认为你走在正确的轨道上，但我建议使用Handlebars Partial Block而不是Block Helper。这将允许将一块模板（块）传递给另一块模板（通过该模板将被包裹）（部分）。

Handlebars为我们提供{{> @partial-block }}作为在部分内呈现模板块的方法。我们可以用它来创建我们的＆＃34; linkWrap＆＃34;部分：

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

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

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

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

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

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

在把手中装有条件容器的干净方法是什么？

1 个答案: