将函数传递给Handlebars模板

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

解决方案非常简单.

Handlebars将输出您传递给模板的对象的属性,如果属性是一个函数,它将执行该函数并输出返回的值

在您的示例中,函数不返回任何值(它只调用alert),因此输出为空.

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

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

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

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