2

当存在链接时，我们需要类似这样的 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}}

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

4

1 回答 1

2

我认为您走在正确的轨道上，但我建议您使用 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请注意，我选择使用一个对象来表示链接，以便我可以将单个参数传递给部分，而不是单独传递url,title等属性。

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

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

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

我创建了一个补充小提琴供参考。

于 2017-09-23T15:46:38.630 回答