Ruby on Rails：将数据调用到 javascript 中的首选方法？

Posted 2023-02-15

【中文标题】Ruby on Rails：将数据调用到 javascript 中的首选方法？

【英文标题】：Ruby on Rails: preferred method of calling data into javascript?

【发布时间】：2021-11-15 23:07:48

【问题描述】：

用例：我有一个显示来自控制器的数据（应用程序记录数据）的静态视图。我只需要获取一次这些数据，并且必须将其传递到视图的 javascript 中（我使用的是可透视的 js 库）。

哪个更适合从我们的控制器调用数据到我们视图的 javascript 中？

选项 1：

  var data = JSON.parse('<%= @result %>');

选项 2：

$.ajax(
       url: "<%= path_to_data %>",
       type: "GET",
       dataType: "json",
       data: JSON.stringify(table),    
 );

这些选项的优缺点是什么？一个问题是，使用选项 1，rails 将 @result 写入 javascript 中，对于大数据，写入脚本看起来很耗时（以及在查看呈现的 javascript 时视觉上没有吸引力）。然而，选项 2 需要对我们的控制器进行额外的 GET 调用。

【问题讨论】：

我喜欢选项 2。使用选项 1，我不得不使用 html_safe 或 w/e（这并不安全：P）

“调用数据”是您从未真正做过的事情。您在数据传递时调用方法和函数。

【参考方案1】：

选项 3。

不要在你的 JS 中使用 erb 插值 - 使用数据属性从视图传递信息。

<div id="graph-module" data-source-url="<%= path_to_data %>">
  ...
</div>

let promise = $.getJSON($('#graph-module').data("url"));

promise.done(function(data)
  // do something with the data
);

是的，这将创建一个额外的 GET 请求，但在我的书中这是非常值得的，以避免将服务器端和客户端域混为一谈，这是 Rails 过于急切地做的事情。

这会将您的 JS 保留在资产管道（或 webpacker）中，可以通过 CDN 进行缩小、缓存和部署，而不是根据当前请求更改的 JS/ERB 汤。

当它在一个单独的文件中并且不依赖于通过另一种语言解析时，它也更容易调试、推理和编写好的代码。它允许您使用 JSLint 等 linting 工具。

如果您想以有意义的方式使用选项 1，您需要使用全局而不是 var。

【讨论】：

任何可以链接的参考资料，说明如何在控制器中执行返回 json 响应而不是视图的 GET 请求？目前，当使用getJSON 时，向控制器添加另一种方法以获取数据（并将其添加到路由）最终会以html 视图的响应文本字符串结束。

guides.rubyonrails.org/…