如何将模型数据传递给 JavaScript (Rails)答案

【问题标题】：How to pass model data to JavaScript (Rails)如何将模型数据传递给 JavaScript (Rails)
【发布时间】：2021-05-24 23:36:11
【问题描述】：

我有一个想要维护的 MVC 架构。在我看来，我有一个按钮可以根据 ChessPosition 数据库中的某些行更新棋盘。目前，我正在将数据（国际象棋位置）输入到一个隐藏的跨度中，然后在 JavaScript 中访问该跨度。很明显，这是垃圾。如果再次单击该按钮，我也将无法更新下一个位置的跨度。将模型传递给 JavaScript 的好方法是什么？在我的控制器中，我将模型加载到一个变量中，我可以在 JavaScript 中使用它吗？如果有，怎么做？

HTML：

<span id="tactic_info" style="visibility: hidden"><%=generate_tactic(@tactic_model) %></span>
<button id="tactic_generator">Generate Tactic</button>

帮手：

module AppsHelper
  def generate_tactic(model)
    id = Random.new.rand(1..Tactic.all.size)
    t = model.find(id)
    @tactic = [t.fen, t.solution]
  end
end

JS：

let tactic, tg;
window.onload = function() {
    tactic = document.getElementById("tactic_info").textContent;
    tg = document.getElementById("tactic_generator");
    tg.onclick = function c() {
        console.log(tactic.split(',', 2));
    };
};

【问题讨论】：

你能分享任何相关的代码吗？
有很多方法 - 数据属性，使用 JSON 而不是 janky JS.erb 请求（服务器将每一步的棋盘状态传回，这是唯一的真理，你只需重绘它），将 JSON 作为带有脚本标签的全局变量插入...
github.com/gazay/gon
@RockwellRice 我添加了一些代码，您可能会发现它有助于分析。我和其他人谈过，他们说我基本上是在做数据属性的事情。

标签： javascript ruby-on-rails model-view-controller model

【解决方案1】：

一个不错的选择是使用 AJAX。也许在谷歌上搜索一下 Ruby AJAX 和 repsond_to 块。

您可以通过带有 get 请求的 javascript 发送您的数据，或者设置一个 link_to 助手。对于获取请求，您将数据发送到的 url 需要与您创建的路由相匹配。

获取请求示例：

在您的点击处理程序中， $.get(/new_task) . . .

在路线中， get'/new_task' => 'taskcontroller#new'

链接到示例：

<%= link_to 'New Task', new_task_path, remote: true %>

'remote: true' 部分允许通过 ajax 将请求提交到您的控制器和操作。在这种情况下，控制器将是 TasksController，而操作将是“新”

现在，在您的控制器操作中，您需要设置一个 respond_to 块 - 这将允许您以特定格式传回数据。那将与此类似

def new
 . . .
 work with data your wish to gather/alter/pass back
 . . .

 respond_to do |format|
     format.html
     format.json
 end
end

从 respond_to 块返回的数据将被限定为与您的控制器操作名称相同的部分。因此，对于本示例，您可能有一个 Task 文件夹，其中包含一个 new.erb。

植入您的新部分，它应该会在数据更改时自行刷新。

手册页读起来可能有点枯燥，但这两页应该会有所帮助

https://tadhao.medium.com/traditional-way-of-performing-ajax-operation-in-rails-with-javascript-jquery-54dae69ec3a1

https://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to

【讨论】：