我將如何引入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響應，以及一些細節在這里。 該主題太寬泛，無法在此處進行描述。 試一試，遇到困難時再回來。