javascript Handlebars-template 中元素的 Onclick-function
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31591020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick-function on elements in Handlebars-template
提问by Esso
I'm building a simple webapp with just Handlebars.js and some jQuery.
我正在使用 Handlebars.js 和一些 jQuery 构建一个简单的 web 应用程序。
Now I have a list of data, and i present them through a Handlebars-template. Then I want some actions associated with these, e.g. update one element, or delete one. I have buttons that one associates with these actions, the problem is that I cannot manage to get onclick-methods associated with buttons in the template to work.
现在我有了一个数据列表，我通过一个 Handlebars 模板来展示它们。然后我想要一些与这些相关的操作，例如更新一个元素，或删除一个。我有一个与这些操作相关联的按钮，问题是我无法设法使onclick与模板中的按钮相关联的方法起作用。
I read this question and answer, which lead me to adding the extra bracket and helpermethod, but it still doesn't work. See code below.
我阅读了这个问题和答案，这导致我添加了额外的括号和辅助方法，但它仍然不起作用。请参阅下面的代码。
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
var myGreatFunction = function(someValue) {
// Work with that value
}
The template:
模板：
{{#each Something}}
<button onclick="myGreatFunction({{{json this}}})"></button>
{{/each}}
Now, doing it like this give me Uncaught SyntaxError: missing ) after argument listat the top of the HTML-file.
现在，这样做会让我Uncaught SyntaxError: missing ) after argument list处于 HTML 文件的顶部。
I noted the answer here, so I tried with onclick="myGreatFunction( '{{{json this}}}' )"which gives me the error Uncaught SyntaxError: Unexpected token ILLEGALat the end of HTML-file.
我注意到这里的答案，所以我尝试使用onclick="myGreatFunction( '{{{json this}}}' )"它Uncaught SyntaxError: Unexpected token ILLEGAL在 HTML 文件末尾给出错误。
With onclick="myGreatFunction( '{{json this}}' )"the button simply disappears on click.
使用onclick="myGreatFunction( '{{json this}}' )"该按钮只需单击即可消失。
Does anyone see something I've missed, or is there another way of doing this? I thought of adding the object to some div/button in the template, then add a jQuery-listener for the click that fetches the value from the template, but that seems so ugly and unclear.
有没有人看到我错过的东西，或者有另一种方法吗？我想将对象添加到模板中的某个 div/按钮，然后为从模板中获取值的点击添加一个 jQuery 侦听器，但这看起来很丑陋和不清楚。
Any tips? All help is greatly appreciated - thanks in advance.
有小费吗？非常感谢所有帮助 - 提前致谢。
UPDATE:Seems the problem is, as Hacketo mentioned below, that the outputted JSON is kind of messed up. I inspected an element in my code:
更新：似乎问题是，正如 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"}')"
(Broken over multiple lines for your convenience).
（为方便起见，分为多行）。
Now I just have to find out of to get that JSON to look right.
现在我只需要找出来让 JSON 看起来正确。
采纳答案by Hacketo
This is because JSON.stringifyreturn a JSON string and contains ".
这是因为JSON.stringify返回一个 JSON 字符串并包含".
At the moment, your template may look like this:
目前，您的模板可能如下所示：
<button onclick="myGreatFunction({{{json this}}})"></button>
Compiled :
编译：
<button onclick="myGreatFunction({"foo":"bar"})"></button>
^ ^ ^ ^ ^ ^
And this result as
这个结果为
Uncaught SyntaxError: missing ) after argument list
参数列表后未捕获的 SyntaxError: missing )
You need to escape those "and you can do this in your helper
你需要逃避那些"，你可以在你的助手中做到这一点
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context).replace(/"/g, '"');
});
And this will result as
这将导致
<button onclick="myGreatFunction({"foo":"bar"})"></button>
回答by Blank
Just take out the extra bracket. If you let Handlebars do HTML escaping (which it will automatically on a regular {{json this}}invocation), it will also escape the quotes for you.
只需取出额外的支架。如果您让 Handlebars 进行 HTML 转义（它会在常规{{json this}}调用中自动进行），它也会为您转义引号。
