使用助手在handlebars.js中創建鏈接

Question

我試圖按照車把文檔中的示例來創建鏈接，但是我對這些說明尚不清楚。 handlebarsjs.com/expressions.html （請參閱“助手”）

首先，如果沒有鏈接幫助器，我可以使鏈接文本顯示在屏幕上，但是就像文本一樣，而不是鏈接。

<script id="template" type="text/x-handlebars-template">
          <h4>{{{my_link}}}</h4>
 </script>

然后從ajax請求中檢索文本。 然后我添加鏈接關鍵字

<h4>{{{link my_link}}}</h4>

然后什么也不顯示。 這是我當前擁有的幫助程序代碼，無法使用：

$(function(){
    Handlebars.registerHelper('link', function(my_link) {

        var url = Handlebars.escapeExpression(my_link.url);
        var result = "<a href='" + url + "'></a>";
        console.log(result);

        return new Handlebars.SafeString(result);

    });
});

將這段代碼放在javascript中是否相關？

當我單擊提交按鈕時，會發出ajax請求並檢索鏈接。 使用鏈接幫助器，console.log會提供一個空鏈接：

"<a href=''></a>"

Answer 1

由於您將幫助程序的名稱注冊為link ，因此模板應以{{{link

所以

<h4>{{{my_link}}}</h4>

應該

<h4>{{{link my_link}}}</h4>

和

var url = Handlebars.escapeExpression(my_link.url);

應該更改為

var url = Handlebars.escapeExpression(my_link);

Answer 2

而不是創建整個的a元素，我可以建議你只屬性創建幫手。 這樣，您可以將其重用於許多其他元素，並且代碼也將更簡單，更好地在模板中讀取。 例如，我建立了這個attr輔助函數：

handlebars.registerHelper('attr', function(name, data) {
    if(typeof target === 'undefined') target = "";

    var result = ' ' + name + '="' + data +  '" ';

    return new handlebars.SafeString(result);
});

這是它在模板中的外觀：

<a target="_blank" {{attr 'href' general.link}}><img src="assets/images/nice_image.png" class="link-icon" /></a>

我認為這種方法比使用助手來創建整個元素要簡單得多，甚至可以重用。 您可以使用與屬性相匹配的方式命名助手，href，src ...