Ruby on Rails - 将 JavaScript 变量从控制器发送到外部 Javascript 资产文件答案

【问题标题】：Ruby on Rails - Send JavaScript variable from controller to external Javascript asset fileRuby on Rails - 将 JavaScript 变量从控制器发送到外部 Javascript 资产文件
【发布时间】：2011-02-12 21:26:36
【问题描述】：

我正在用 Ruby on Rails 创建一个网站。我有一个控制器动作，它呈现这样的视图：

def show
  time_left = Time.now.to_i - 3.hours.to_i
  @character = current_user.characters.find(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.xml  { render :xml => @character }
  end
end

这很好，因为它可以按照我的喜好呈现 show.html.erb。但是，我想以某种方式将 time_left 作为 Javascript 变量传递给视图，因为该值由倒计时 JQuery 插件使用。

我可以在 HTML 中的页面上放置一个 javascript 块并像这样打印一个实例变量：

<script type="javascript"> $('#countdown').countdown('<%= @time_left =>')</script>

但是我想将我所有的 JS 保存在一个外部文件中，并且在页面之外任何人都可以就如何实现这一点提供一些建议吗？

【问题讨论】：

相关：stackoverflow.com/questions/2464966/…‌n-in-rails-view

标签： javascript ruby-on-rails

【解决方案1】：

是的，你可以！

用一个参数（时间限制）将您的 JS 代码重写为函数并将其放入某个外部文件中。然后，您可以从视图中调用该函数并将该 @timeleft 变量作为 JS 函数参数传递。

简短示例：

#controller
@time_left = Time.now.to_i - 3.hours.to_i

#javascript
function count_down(time_left) {
  $('#countdown').countdown(time_left)
}

#view
<%=javascript_tag "count_down(#{@time_left})" -%>

javascript_tag

示例未经测试，这只是想法而不是完整的解决方案。不要忘记加载那个 JS 文件。你可以使用其他 JS rails helper javascript_include_tag.

【讨论】：

干杯，非常感谢！
其实今天我建议使用元标记属性将变量传递到页面中。您可以通过 javascript 轻松读取这些属性。

【解决方案2】：

retro 使用函数参数的技术是可能的，但您必须正确地转义您传递的变量，使用 escape_javascript 或 to_json + html_safe 如下所述。

但是，由于您想影响外部文件，最好的技术是使用 gon。另一个很好的可能性是使用数据属性。

贡

专门用于这项工作的宝石：https://github.com/gazay/gon

可能是最强大的解决方案。

宝石文件：

gem 'gon'

控制器：

gon.timeleft = 1

布局app/views/layouts/application.html.erb:

<html>
<head>
  <meta charset="utf-8"/>
  <%= include_gon %>
  <%= javascript_include_tag 'application' %>

资产文件：

gon.timeleft === 1

数据属性

向属性添加值，使用 JavaScript DOM 操作检索它们。

有时称为“不显眼的 Javascript”。

查看头：

<%= javascript_include_tag 'application' %>

查看正文：

<%= content_tag 'div', '', id: 'data', data: {timeleft: '1'} %>

资产文件：

$(function() {
  parseInt($('#data').data('key1')) === 1
})

以下说明了 escape_javascript 和 to_json 如何在复古的答案之上使用。

escape_javascript

别名：j。

仅适用于字符串。

转义在 JavaScript 字符串中可能具有特殊含义的字符，像反斜杠转义一样，转换成适合放在 JavaScript 字符串文字引号内的格式。

保持html_safe输入状态，所以需要html_safe 否则像&lt; 这样的特殊HTML 字符会被转义到&lt;。

<% a = "\\n<" %>
<%= javascript_tag do %>
  f('<%= j(a)           %>') // === '\\n&lt;'
  f('<%= j(a).html_safe %>') // === '\\n<'
<% end %>

to_json + html_safe

有效，因为 JSON 是 almost a subset of Javascript object literal notation。

不仅适用于哈希对象，还适用于字符串、数组和整数转成对应数据类型的 JSON 片段。

<% data = { key1: 'val1', key2: 'val2' } %>
<%= javascript_tag do %>
  var data = <%= data.to_json.html_safe %>
  f(data.key1) \\ === 'val1'
  f(data.key2) \\ === 'val2'
<% end %>

【讨论】：

谢谢 - 如果他们不是重复的，那么他们应该得到单独的答案
data- 属性简单易行。谢谢