什么是在句柄中有一个条件容器的干净方式？

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。这将允许将一块模板（块）传递给另一块模板（它将被包裹）（部分）。

把手给我们提供了{{> @partial-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元素将呈现没有父锚元素。

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