Rails每次點擊創建多個購物車記錄
[英]Rails is creating multiple shopping cart records per click
問題描述
我正在遵循此指南來創建購物車模型： 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
1 個解決方案
解決方案1
2 已采納 2015-10-08 11:17:01
同一產品被添加到購物車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將它們視為新元素，因此每次單擊都會觸發函數x次。 我想有點像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鈎子確保每次請求Turbolinks時刷新。
如果您想這樣做而不必在每次調用Turbolinks時都重新聲明，則只需從文檔中進行委托即可 ：
#app/assets/javascripts/application.js
$(document).on("click", "#shopping_cart", function(){
//payload
});
創建本地存儲的“購物車”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.