Question

我正在使用（或至少以HandlebarsJS开头的html模板，但我可能已经走到了尽头。我想要的是将一个函数传递给模板，例如

<div id="divTemplate">
  <span onclick="{{func}}">{{text}}</span>
</div>

然后我希望有类似

的东西

var source = $('#divTemplate').html();
var template = Handlebars.compile(source);

var data = {
  "text": "Click here",
  "func": function(){
    alert("Clicked");
  }
};

$('body').append(template(data));

但该函数在init上执行，它不会传递给模板，结果是：

<span onclick="">Click here</span>.

我正在尝试使用辅助函数的一些东西，但我也无法使其工作。任何想法，将不胜感激。 :)

Answer 1

解决方案非常简单。

句柄将输出您传递给模板的对象的属性，如果属性是函数，它将执行该函数并且< strong>输出返回值

在您的示例中，函数不返回任何值（它只调用alert），因此输出为空。

您可以创建一个这样的辅助方法：

handlebars.registerHelper('stringifyFunc', function(fn) {
    return new Handlebars.SafeString("(" + 
               fn.toString().replace(/\"/g,"'") + ")()");
});

然后从模板中你只需要在需要字符串化的函数上使用它：

<div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>

Answer 2

您还可以创建全局定义的回调函数，并在模板的onclick值中传递函数调用字符串。

使用tmpCallback注释括号以获取数据对象中的func值。

var tmpCallback = function () {
    alert('hello');
}

var data = {
  "text": "Click here",
  "func": "tmpCallback()"
};

$('body').append(template(data));

这只是一种快速解决方法，我认为@BFil的回答可能更好。

将函数传递给Handlebars模板

2 个答案: