Rails 4:将变量传递给javascript

时间:2015-03-05 05:20:14

标签: javascript ruby-on-rails variables ruby-on-rails-4

我尝试了很多方法并遵循了Ryan Bates'指南,但无论我做什么,我仍然未定义。

application.html.erb

<body>
 <%= content_tag :div, id: 'trackers', data: {trackers: User.count} do %>
 <% end %>
</body

application.js.erb

var datadump = ($('#trackers').data('trackers'))
console.log(datadump)
//returns undefined in console

查看页面源我可以看到变量

<div data-trackers="2" id="trackers">

我现在正在传递User.count只是为了保持简单,但我需要传递@trackers_count,它在应用程序控制器的before_action中实例化。一旦我在这里找出问题,我应该能够解决这个问题。有什么建议吗?

更新 - 我已将所有变量简化为跟踪器,而不是trackers_count,以防止语法和更新代码出现任何错误,以反映这一点。

答案更新 - 我选择了正确答案,因为如果您想传递任何变量ASIDE FROM CURRENT_USER,那些方法就能完美运行。但是,您无法使用JS中的current_user访问任何内容,因为它在窗口之前加载,因此无法知道current_user是谁。这是一个真正的痛苦,但我只是做了很长的路,并通过传入json和ajax请求访问我需要的信息。

4 个答案:

答案 0 :(得分:10)

我以前做过:

var my_var = <%= User.count %>
console.log(my_var)

如果它是一个整数,这可以正常工作。 但是,如果要传递对象,请使用:

var my_var = JSON.parse(('<%= (@Users.count) == 0 ? "[]" : Users.first(10).to_json %>')

console.log(JSON.stringify(my_var))

答案 1 :(得分:3)

你忘了准备文件了。尝试:

$(function(){ 
  var datadump = ($('#trackers').data('trackers'));
  console.log(datadump)
});

或者从Rails提供数据到JS使用Gon gem https://github.com/gazay/gon

答案 2 :(得分:0)

从谷歌这里跌跌撞撞。在我的例子中,我试图将一个对象数组传递给js.erb,这会触发前端组件侦听的事件。对于来自谷歌的任何人,我通过执行以下操作解决了这个问题:

在我的controller.rb中:

@payload = []

array.each do |a|
  temp = {
    foo: a.id,
    bar: a.relation.relation
  }
  @payload << temp
end

在我的js.erb中:

$(document).trigger('event', { data: <%= @payload.to_json.html_safe %> })

在我的component.js中:

$(document).on('event', (e, data) => {
  console.log(data) //should be array of objects in proper format
})

希望这有助于某人!

答案 3 :(得分:0)

This可以为您提供帮助。

对我来说,我想翻转数组

  @dates = ["2018-12-24", "2018-12-25", "2018-12-26", "2018-12-27", "2018-12-28"]

转换为Javascript中的变量。我尝试了基本的:

var dates = <%= @dates.join(", ") %>
alert(my_var)

这提醒了此确切文本:

1995

我不知道为什么。

因为它不起作用,所以我通过复制和粘贴在那里尝试了Guru的解决方案,但是现在更糟的是我的代码出现错误。最终,我得到了Guru的解决方案,可以像这样工作:

(打印的嵌入式ruby打开和关闭在JSON.parse()外部起作用,并且缺少“)”)

  var dates = <%= JSON.parse(@dates.join(", ").to_json)%>
  alert(dates)

但是即使它没有崩溃,也想猜出它警告了什么?

是的,你猜对了:

1995

所以我放弃了,我使用了一种解决方法:

在我看来edit.html.erb

<div class="dates"><%= @dates.join(", ") %></div>
<script>
  var dates = $(".dates").text()
  alert(dates)
  $(".datepicker").val(dates)
</script>

这使我可以输入变量,因此可以警告正确的数据并为Datepicker的输入设置正确的信息。我仍然因无法解决1995年的问题而感到困惑。如果有人愿意解释,我将不胜感激。希望这会有所帮助,并祝您有美好的一天!