将一个函数传递到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));

但是该函数在初始化时执行，而不是传递到模板中，结果为：

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

我也尝试了一些辅助函数，但是我也无法使其正常工作。任何想法都将不胜感激。:)

- isHristov

Answer 1

解决方案非常简单。

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

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

您可以创建一个像这样的Helper方法：

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

然后在模板中，您只需要将其用于需要转换为字符串的函数即可：

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

- BFil

---

我一直收到“意外的令牌（”与我的示例中包含函数的data变量，我应该将其更改为其他内容吗？ - isHristov

忘记将其包装在闭包中，你还需要进行一些转义，这里是一个可用的 fiddle：http://jsfiddle.net/fHycd/ - BFil

Answer 2

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

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

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

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

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

这只是一个快速解决问题的hack，我认为@BFil的答案可能更好。

- Satys