Rails 每次点击都会创建多个购物车记录

Question

我正在按照本指南创建购物车模型： https://richonrails.com/articles/building-a-shopping-cart-in-ruby-on-rails

我让它成功运行，但仍然有问题。当我加载页面并添加一个项目时，会添加一个，如果我转到另一个页面，然后再次加载主页，通过我拥有的侧边栏菜单，我单击一个产品，然后添加相同的产品 3次到购物车。我转到另一个页面并返回，每次点击 5 项，再次每次点击 7 项。 我不知道为什么会这样，我什至不知道要显示我的代码的哪一部分，所以有人可以帮助我。 如果我重新加载页面（通过单击地址栏并输入），它会返回到每次单击添加一项。

提前致谢

编辑：在第一次评论建议之后，这里是控制器代码。

def create
    @invoice = current_invoice
    @invoice_product = @invoice.invoice_products.new(invoice_product_params)
    @invoice.save
    session[:invoice_id] = @invoice.id
end

def update
    @invoice = current_invoice 
    @invoice_product = @invoice.invoice_products.find(params[:id])
    @invoice_product.update.attributes(order_item_params)
    @invoice_products = @invoice.invoice_products
end

def destroy
    @invoice = current_invoice 
    @invoice_product = @invoice.invoice_products.find(params[:id])
    @invoice_product.destroy
    @invoice_products = @invoice.invoice_products
end

private
def invoice_product_params
    params.require(:invoice_product).permit(:id, :invoice_id, :product_id, :price, :tax, :value)
end

Answer 1

同一产品会被添加到购物车 3 次。我去 另一个页面并返回，每次点击 5 项，再次每次点击 7 项 点击

这具有 Turbolinks 和不良 JS 绑定的所有特征。

--

让我解释一下……

Turbolinks 使您的 Web 应用程序中的以下链接更快。 而不是让浏览器重新编译 JavaScript 和 CSS 在每次页面更改之间，它使当前页面实例保持活动状态和 仅替换正文（或部分）和标题中的标题。思考 CGI 与持久化进程。

简而言之，Turbolinks 使用“Ajax”加载下一页的<body>，替换您当前的<body> 内容。虽然这确实加快了处理速度（通过消除重新编译 CSS/图像的需要），但它会对 JS 绑定造成严重破坏。

JS“绑定”到 DOM 中的元素：

它希望有 元素 可以绑定到。这在大多数情况下都非常有效：

element = document.getElementById("your_element").addEventListener('click', function() {
   console.log('anchor');
});

但是，使用 Turbolinks（尤其是 JQuery）的问题是绑定可能会发生多次，具体取决于 Turbolinks 将新数据加载到 DOM 的次数。

问题是因为你的 Javascript 没有刷新，但是你的 DOM 元素是，JS 将它们视为 new 元素，从而触发函数x number of每次点击次数。我想有点像n+1。

--

在回答您的问题时，问题在于您的 JS 绑定：

#app/assets/javascripts/application.js
bind = function() {
    $("#shopping_cart").on("click", function(){
        //payload
    });
};
$(document).on("ready page:load", bind);

上面将为您选择元素的“本地”选择，并使用page:load Turbolinks hook 确保每次请求 Turbolinks 时都会刷新。

如果您想在每次调用 Turbolinks 时不必重新声明，只需 delegate from the document：

#app/assets/javascripts/application.js
$(document).on("click", "#shopping_cart", function(){
   //payload
});