Создать ссылку в 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 элемент я могу предложить вам создать помощника только для атрибута. Таким образом, вы можете повторно использовать его для многих других элементов, а также код будет намного проще и лучше читать в шаблонах. Например, у меня есть построить эту атр вспомогательную функцию:

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