将实例变量传递给 webpacker JS答案

【问题标题】：Passing instance variable to webpacker JS将实例变量传递给 webpacker JS
【发布时间】：2018-02-08 17:52:09
【问题描述】：

在 Rails 应用程序中，是否可以将当前实例变量传递给通过 webpacker（而不是 sprockets）加载的 javascript 文件？这可能会阻止我通过执行以下操作将数据传递给基于组件的框架，例如 Vue：

const el = <%= @employees.to_json %>

我的想法是简化它，这样我就不需要将 Rails 用作 API，同时仍向前端框架提供数据。将数据放在 HTML 中的 div 或表单中的想法对我来说似乎很混乱。我什至想如果我可以创建一个在 sprocket 上加载的空 javascript 文件，我只需创建变量，然后将其加载到使用 webpack 加载的文件中，但它仍然可能过度工程......有人可以帮助我吗？

【问题讨论】：

标签： javascript ruby-on-rails webpack webpacker

【解决方案1】：

也许gon gem 可以提供帮助。 Railscast。只需在控制器中设置变量：

gon.employees = @employees.to_json

它将在 js gon.employees 上可用

【讨论】：

谢谢！！！多亏了你，我才能够创建（我认为是）一个不错的 Vue on Rails webpack 骨架！（无链轮）github.com/JacopoGobbi/RailsSkeleton

【解决方案2】：

你能“用 javascript 响应”吗？

在您的控制器中，您将拥有如下内容：

def index
 @employees = Employees.all # Load data
 respond_with do |format|
    format.html
    format.js
  end
end

那么你将拥有index.js.erb:

const el = <%= @employees.to_json %>

但是使用 Rails 作为 API

您还可以将该 javascript 变量放入 HTML 中的 <script> 标记中

【讨论】：

我的意思是让实例变量可用于在 app/javascript/packs 中使用 webpacker 加载的 js，但我认为这些 js 与一个轨道响应或 html 具有不同的上下文。我错了吗？
@JacopoGobbi 如何加载 JS 并不重要。如果它在用户端运行，您可以从 rails 设置它，无论是在 HTML DOM 中还是通过 ajax 请求。
嗨，我检查得更好，实例变量没有加载到 webpack 加载的 css 上。随意克隆这个 repo github.com/JacopoGobbi/RailsSkeleton/blob/… 自己尝试如果你克隆 master，你会看到我使用 @vasiliy-shakhunov 指定的 gon 解决了最新的提交
@JacopoGobbi 啊，我明白了问题所在。 app/javascript 在控制器操作之前被编译。所以那个变量在那个时候永远不会被填充。然而，简单的红宝石注入将起作用。