将函数传递给 Handlebars 模板答案

【问题标题】：Passing a function into a Handlebars template将函数传递给 Handlebars 模板
【发布时间】：2018-11-06 05:51:13
【问题描述】：

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

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

【问题讨论】：

标签： javascript handlebars.js

【解决方案1】：

解决方案非常简单。

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

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

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

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

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

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

【讨论】：

我不断从我的示例中获得带有 data 变量（包含函数）的“意外令牌（”，我应该将其更改为其他内容吗？
忘了把它包在一个闭包里，你还需要做一些转义，这是一个工作小提琴：jsfiddle.net/fHycd
谢谢朋友，你帮了大忙！ :)

【解决方案2】：

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

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

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

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

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

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

【讨论】：