使用 helper 在 handlebars.js 中创建链接答案

【问题标题】：Create link in handlebars.js using helper使用 helper 在 handlebars.js 中创建链接
【发布时间】：2016-05-13 22:53:25
【问题描述】：

我已尝试按照车把文档中有关如何创建链接的示例进行操作，但说明对我来说非常不清楚。 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>"

【问题讨论】：

标签： javascript jquery handlebars.js

【解决方案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);

【讨论】：

谢谢，现在控制台日志显示了标签内的链接！但是由于某种原因，当我按下提交时它不会出现在屏幕上。也许我必须以某种方式重新排列代码的顺序。
@Galivan.. 您是否将锚标记附加到您的页面。否则不会显示。

【解决方案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...

【讨论】：