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

使用帮助器

2 个答案: