Ruby on Rails 在 Ruby 变量更改时更改 Bootstrap Badge 内容，而无需再次重新加载整个页面

Question

首先，我对 Ruby on Rails 和 Ruby 非常陌生（3 周） 经验），我来自 Java 和 JavaFX 背景。

我创建了一个小型电子商务网站，您可以在这里找到所有代码 -> https://github.com/goxr3plus/Ruby-on-Rails-eCommerce-Website

网站顶部的图片

问题描述

因此，您可以看到一个名为 Basket (0) 的链接，其中 0 是篮子中的项目数。这个数字是一个红宝石变量，每次用户按Add to Basket 获取新项目时它都会增加。

---

那么问题是什么？ 当按下添加到购物篮时，我不想重新加载所有网站，以便将 Basket (0) 的文本转到 Basket(1)。

我不知道如何实现这个......这是Rails控制器在创建新项目并将其添加到购物篮时的代码。

---

line_items_controller.rb(Full Code)（实际上是购物车项目控制器）

def create

     /....code code


     //.. Ok so now the basket item counter has increased
     **How i can call some javascript code to refresh the Navigation Bar without reloading the website ?**    

    end

来自导航栏的代码 (_header.html.erb) (Full Code)

 <span class="badge badge-pill badge-warning" id="total_cart_items_badge"><%= @current_cart.line_items.count %></span>

如需更多信息，请咨询我。我正在搜索 2 天现在找不到解决方案...

随机想法

如果我在application.js 上定义这个函数：

function updateHeaderBar() {
  $('total_cart_items_badge').text(totalBasketItems)
}

如何从line_items_controller.rb 调用它？

---

终于

例如在JavaFX 中，我们可以定义值更改侦听器和绑定，因此每次值更改时都会触发一个动作（您可以调用方法等）。

Ruby on Rails 有类似的东西吗？

Answer 1

我在这个精彩的教程之后找到了我的问题的答案 -> https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy

并使用这个 StackOverFlow 问题 -> ActionController::UnknownFormat with format.js for ajax implementation (Rail 4)

我很高兴我会在这个答案中添加更多内容。所以基本上我想做的是在 total_items 变量发生变化时更新 SPAN 的文本。所以我们开始 ->

首先创建一个与控制器方法同名的文件。例如，在我的情况下，我从控制器的create 方法调用它，因为每次按下Add To Basket 按钮时都会调用此方法。

如您所见，我只是使用它的 ID 来捕捉跨度，而使用嵌入式 Ruby，我正在更改它的内容。

那么它自己的控制器方法呢？代码如下：

def create
   //...code code code

    respond_to do |format|
     if @line_item.save!
       format.js
       # below is a second way without creating ``
       # format.js { render :js => "alert('hi')" }
     else
       format.html { render :new , notice: 'Error adding product to basket!' }
     end
   end
end