什麼是在句柄中有一個條件容器的乾淨方式？

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作爲參考。