我正在使用 Handlebars.js 和一些 jQuery 构建一个简单的网络应用。
现在我有了一个数据列表,我通过 Handlebars 模板展示它们。然后我想要一些与这些相关的 Action ,例如更新一个元素,或删除一个。我有与这些操作相关联的按钮,问题是我无法设法让 onclick
- 与模板中的按钮相关联的方法起作用。
我读了this question and answer ,这导致我添加了额外的括号和 helpermethod,但它仍然不起作用。请参阅下面的代码。
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
var myGreatFunction = function(someValue) {
// Work with that value
}
模板:
{{#each Something}}
<button onclick="myGreatFunction({{{json this}}})"></button>
{{/each}}
现在,这样做会在 HTML 文件的顶部给我 Uncaught SyntaxError: missing ) after argument list
。
我记下了答案 here ,所以我尝试使用 onclick="myGreatFunction( '{{{json this}}}' )"
,最后给出了错误 Uncaught SyntaxError: Unexpected token ILLEGAL
HTML 文件。
使用 onclick="myGreatFunction( '{{json this}}' )"
按钮会在点击时消失。
有没有人看到我错过的东西,或者有其他方法吗?我想将对象添加到模板中的某个 div/按钮,然后为从模板中获取值的点击添加一个 jQuery 监听器,但这看起来很难看且不清楚。
有什么建议吗?非常感谢所有帮助 - 提前致谢。
更新: 问题似乎是,正如 Hacketo 在下面提到的那样,输出的 JSON 有点困惑。我检查了代码中的一个元素:
onclick="someFunc('{"id":5,"publisher":null,"message":" asdadsad","address":"asdad","published":"
Last Saturday at 12:00 AM","createdAt":"2015-07
23T09:55:35.486Z","updatedAt":"2015-07-23T09:55:35.486Z"}')"
(为方便起见,分为多行)。
现在我只需要找到让 JSON 看起来正确的方法。
最佳答案
这是因为 JSON.stringify
返回一个 JSON 字符串并包含 "
。
目前,您的模板可能如下所示:
<button onclick="myGreatFunction({{{json this}}})"></button>
编译:
<button onclick="myGreatFunction({"foo":"bar"})"></button>
^ ^ ^ ^ ^ ^
结果为
Uncaught SyntaxError: missing ) after argument list
你需要转义那些 "
并且你可以在你的帮助程序中执行此操作
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context).replace(/"/g, '"');
});
这将导致
<button onclick="myGreatFunction({"foo":"bar"})"></button>
关于javascript - Handlebars 模板中元素的点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31591020/