如何在Rails ERB中将对象变量传递给JS onclick函数？

先拆解你之前四种写法的问题：

• 写法1：onclick="fun(a,b,c)"
  这里的a、b、c是JavaScript上下文的变量，但页面里根本没在JS中定义这些变量，浏览器找不到对应值，要么报错要么拿不到正确内容。
• 写法2：onclick="fun('a,b,c')"
  直接传递了固定字符串'a,b,c'，完全不是你要的对象，自然会变成字符串类型。
• 写法3：onclick="fun(\'' + a + '\', \'' + b + '\', \'' + c + '\')"
  JS里未定义a、b、c变量，就算定义了，对象直接转字符串只会得到[object Object]，完全丢失对象内的数据。
• 写法4：onclick="fun(\'' + <%= a %> + '\', \'' + <%= b %> + '\', \'' + <%= c %> + '\')"
  ERB输出的是Ruby对象的字符串形式（比如Ruby哈希会输出{:name=>"test"}），这种格式JS无法识别，拼入代码后直接触发「Invalid or Unexpected token」语法错误。

正确解决方式 #

因为a、b、c是Ruby对象，要传给JS函数，必须先转成JS能识别的对象格式——JSON。

方法一：直接在onclick中传递解析后的对象

用Ruby的to_json方法把对象转成JSON字符串，再用raw避免ERB自动转义引号，渲染后就是合法的JS对象字面量：

<input type="checkbox" id="group_box" onclick="fun(<%= raw a.to_json %>, <%= raw b.to_json %>, <%= raw c.to_json %>);"/>

方法二：先定义JS变量再调用（更清晰，推荐）

先在script标签里把Ruby对象转成JS变量，再在onclick中使用这些变量：

<script type="text/javascript">
  // 将Ruby对象转换为JS可识别的对象
  const jsA = <%= raw a.to_json %>;
  const jsB = <%= raw b.to_json %>;
  const jsC = <%= raw c.to_json %>;

  function fun(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
  }
</script>

<input type="checkbox" id="group_box" onclick="fun(jsA, jsB, jsC);"/>

内容的提问来源于stack exchange，提问作者Surbhi Goel