我将如何引入Jquery项目以更新Sinatra中的index.erb？

Question

所以我有一个简单的游戏，在index.erb中，代码如下：

<div class="battleInfo">
  <h2> Your HP: <%= @my_knight.hp %> </h2>
  <h2> Dragon HP: <%= @my_dragon.hp %> </h2>

  <h1> <%= @results %> </h1>
</div>

我想在公共文件夹中将Jquery用作app.js，以更新HP信息，以便我们可以看到字符的全部消耗以及它们如何死亡。

JS代码：

function postHP() {
      $(".battleInfo").append(my_knight.hp);
      $(".battleInfo").append(my_dragon.hp);
};

我收到未定义my_knight的错误。 如果我使用@my_knight ，则表示@是非法字符。

这是我使用Ruby的第一周，我不确定如何使它正常工作，并且无法在线找到答案。

我想基本的问题是如何从js获取信息到sinatra。 我的CSS工作正常。

任何帮助表示赞赏，谢谢

Answer 1

首先，您需要了解何时何地发生了什么。 首先，客户正在提出请求。 Rails接收实例化控制器的请求，该请求设置实例变量。 然后，rails获取您的erb文件，在其中找到所有<%.. %>块并替换/执行命令。 这导致纯HTML被发送回客户。

当客户收到html时，它将加载此html中引用的所有css和javascript文件。 这个javascript绝对无法访问控制器的实例变量-它不知道它们是否曾经存在过，它不知道它是Rails应用程序，也不知道控制器是什么，等等。

将任何类型的数据拉回视图的最常见方法是发送AJAX-这意味着浏览器将对您的服务器进行额外的调用，这将返回一个JSON对象，可被javascript理解并且可以用来更新加载的HTML。

有许多步骤可以实现这一点。 首先，您需要在控制器中创建一个新动作，例如update_hp或sth。 然后，您必须使用JavaScript触发AJAX调用，并定义一个处理程序（函数）以处理来自服务器的成功响应。 该处理程序很可能会更新请求的字段。

你可以看到如何构建AJAX请求一些例子在这里建设JSON响应，以及一些细节在这里 。 该主题太宽泛，无法在此处进行描述。 试一试，遇到困难时再回来。