rails link_to：遠離ajax加載的內容

Question

嘿大家，我正在開發一個應用程序，我在使用新的Rails 3 link_to時遇到了困難。 這是情況 - 我的“主頁”頁面上有兩個div，每個div都在document.load中填充ajax。 這按預期工作。

在我加載到這些div中的頁面內容中，我想使用link_to ...：remote => true功能。 源使用data-remote =“true”標記按預期呈現，但是當我單擊鏈接時，它們將被完全忽略（鏈接被視為常規超鏈接）。

我已經編寫了正確處理所有內容的.rjs文件（因為它們在硬編碼時有效），所以這不是問題。

這是加載ajax的內容的html源代碼：

<div>
  <a href="/cart/add/2" data-remote="true">Link A</a>
  <a href="/cart/add/1" data-remote="true">Link B</a> 
</div>

通常嵌入到頁面中時單擊其中一個鏈接會導致我的購物車正確更新...但是，當我使用AJAX將此內容動態加載到頁面時，鏈接就會跟隨並忽略data-remote =“true” ...

最初我認為它與原型沒有在AJAX中正確加載有關，但我已經檢查了所有這些並且它沒有改變一件事......

我真的很困惑......有沒有人想過這個？

# add method of controller
def add
  product = Product.find_by_id(params[:product_id])
  params[:quantity] ||= 1
  params[:price] ||= product.price

  unless product.nil?
    @line = session[:cart].purchase_lines.select {|l| l.product_id == product.id}.first
    unless @line.nil?
      @line.quantity = (@line.quantity + params[:quantity].to_i)
    else # create a new purchase_line in the cart
      @line = session[:cart].purchase_lines.build({ :product_id => product.id, :price => params[:price], :quantity => params[:quantity].to_i })
    end
  else
    flash[:error] = "Unable to add the selected product"
  end
end  

和我的rjs

# add.rjs
page.if page['product_' << @line.product_id.to_s] do
  page.replace 'product_' << @line.product_id.to_s, :partial => 'line'
page.else
  page.insert_html :bottom, 'cart', :partial => 'line'
end

page.replace_html 'sub_total', number_to_currency(session[:cart].sub_total, :unit => '$')
page.replace_html 'tax', number_to_currency(session[:cart].tax, :unit => '$')
page.replace_html 'total', number_to_currency(session[:cart].sub_total+session[:cart].tax, :unit => '$')
page.visual_effect :highlight, 'product_' << @line.product_id.to_s, :duration => 1

Answer 1

我很確定這里的問題是當你的頁面第一次加載時，你正在使用的Rails UJS javascript庫（默認為Prototype，或jQuery等）將監聽器綁定到錨點的onclick事件（鏈接） ）元素。 但是，當您使用新標記動態更新頁面時（在本例中為ajax），新的錨標記不會收到此綁定，因為UJS庫僅在頁面首次加載時執行此操作。 如果您使用jQuery作為您的UJS，您應該查看位於jQuery API文檔中的jQuery.live（）事件處理程序附件

API的描述如下：

描述：為現在和將來與當前選擇器匹配的所有元素附加事件的處理程序。

具體來說，你應該給將接收AJAX加載內容的div一個id讓我們說“cart-links”，然后在頁面中添加一些javascript，類似於以下內容：

$('#cart-links a').live('click', function() {
  // make your AJAX calls here
});

如果你正在使用它，我不確定是否有Prototype等效。

我越進入javascript和Rails，我就越發現很多Rails javascript助手實際上使javascript開發和AJAX處理更加困難，而且我傾向於使用原始jQuery。

祝好運！

Answer 2

我同意Patrick，你可能在加載DOM時綁定，所以任何新添加的元素都不會被綁定。 如果你正在使用的javascript（即Prototype）沒有像jQuery的live（）這樣的功能，你可以將綁定邏輯封裝在一個取消綁定然后重新綁定自身的函數中（你可能想要命名事件所以你不要unbind任何其他處理程序，但我不確定Prototype是否支持命名空間事件），然后你可以在插入新元素時調用該函數。 或者，您可以將綁定與新創建的元素隔離，而不是綁定到具有該類名或標記名的每個元素。

和Patrick一樣，我也更喜歡使用原始jQuery。 通過這種方式，您無需了解rails.js的作用，也無需了解其無法執行所需操作的方法。 作為開發人員，您應該知道自己想要javascript做什么，並且做到這一點。 如果你更喜歡使用Prototype，你仍然應該制作自己的rails.js，但在我看來，jQuery確實更好。