7

我正在使用（或至少开始使用）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>.

我也在尝试一些带有辅助功能的东西，但我也无法让它工作。任何想法，将不胜感激。:)

4

2 回答 2

17

解决方案非常简单。

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

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

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

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

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

<div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>
于 2012-09-19T13:38:03.787 回答
0

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

注意数据对象中 func 值的 tmpCallback 括号。

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

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

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

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

于 2018-11-05T21:31:35.767 回答