在Handlebars-template中的元素上使用Onclick函数 [英] Onclick-function on elements in Handlebars-template

问题描述

现在我有一个数据列表，我通过一个Handlebars-模板。然后我想要一些与这些相关的动作，例如更新一个元素，或者删除一个元素。我有一个与这些操作相关联的按钮，问题是我无法设置获取 onclick - 与模板中的按钮关联的方法。

我阅读了这个问题和答案，这导致我添加额外的支架和helpermethod，但它仍然不起作用。请参阅下面的代码。

  Handlebars.registerHelper（'json'，function（context）{
 return JSON.stringify上下文）; 
}）; 
 
 var myGreatFunction = function（someValue）{
 //使用该值
} 
  

模板：

  {{＃each Something}} 
<按钮onclick =myGreatFunction（{{{json this}}}）>< / button> 
 {{/ each}} 
  

现在，像这样做给我<$ c

我注意到了答案这里，所以我试着用 onclick =myGreatFunction（'{{ {json this}}}'）这给了我错误未捕获的SyntaxError：意外的标记ILLEGAL 在HTML文件的末尾。 p>

使用 onclick =myGreatFunction（'{{json this}}'）按钮在点击时消失。 / p>

有人看到我错过的东西，还是有另一种方式做这件事？我想将对象添加到模板中的某个div /按钮，然后添加一个jQuery-侦听器来获取模板中的值，但这看起来很难看，也不清楚。

任何提示？所有帮助都非常感谢 - 提前感谢。

更新：好像Hacketo下面提到的那样，问题出在JSON上搞砸了。我检查了我的代码中的一个元素：

  onclick =someFunc（'{& quot; id& quot;：5， & quot; publisher& quot; null，" message& quot;：" asdadsad& quot;，"地址"：" asdad& quot;，" quot ;已公布"：" 
上周六在上午12:00"，" createdAt"：" 2015-07 
 23T09：55：35.486Z& ;"" updatedAt"：" 2015-07-23T09：55：35.486Z& quot;}'）
  

（为方便起见，分成多行）

现在我只需要找出JSON看起来是正确的。

解决方案

这是因为 JSON.stringify return a JSON字符串并包含。

目前，您的模板可能如下所示：

 < button onclick =myGreatFunction（{{{json this}}}）>< / button> 
  

编译：



 < button onclick =myGreatFunction（{foo：bar }）>< /按钮> 
 ^ ^ ^ ^ ^ ^ 
  

此结果为



未捕获的SyntaxError：缺失）在参数列表之后





---

您需要转义那些，您可以在助手中执行此操作。

  Handlebars.registerHelper（'json'，function（context）{
 return JSON.stringify（context）.replace（// g，'& quot;'）; 
}）; 
  

这会导致

<$ p $ （& quot; foo& quot;& quot; bar& quot;}）>< / button>< code>< button onclick =myGreatFunction

I'm building a simple webapp with just Handlebars.js and some jQuery.

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.

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 list at the top of the HTML-file.

I noted the answer here, so I tried with onclick="myGreatFunction( '{{{json this}}}' )" which gives me the error Uncaught SyntaxError: Unexpected token ILLEGAL at the end of HTML-file.

With onclick="myGreatFunction( '{{json this}}' )" the button simply disappears on click.

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.

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:

onclick="someFunc('{"id":5,"publisher":null,"message":" asdadsad","address":"asdad","published":&quot
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.

解决方案

This is because JSON.stringify return a JSON string and contains ".

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

---

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({&quot;foo&quot;:&quot;bar&quot;})"></button>

这篇关于在Handlebars-template中的元素上使用Onclick函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！