Rails 4 best_in_place gem 遍历列表显示问题

Question

我关注 Railscast #302 to install the best_in_place gem 我的应用程序的购物车，现在我能够成功地在线更新商品的数量，以及使用 ajax 成功绑定来更新 div包含我购物车中该商品的总价。但是，当我尝试遍历购物车中的完整项目列表时出现了一个奇怪的显示问题。

当用户第一次登陆购物车时，他们会看到以下内容：。

尝试更新任一项目的数量时；但是，每个行项目都会显示两列。第一列（在两行中）包含与第一项的总计值匹配的字段，两行中的第二列对第二项的总计执行相同的操作：

如果第二个项目的数量发生变化，这个杂散项目将继续正确更新；但是，这两个问题是：1) 杂散项目不应该在原处，2) 与项目 #2 在同一行的正确项目没有更新。

相关代码示例如下，在此先感谢！

line_items_controller.rb

class LineItemsController < ApplicationController
  respond_to :html, :json 

  ...

  def update
    @line_item = LineItem.find(params[:id])
    @line_item.update_attributes(line_item_params)  
    respond_with @line_item
  end
end

shopping_carts/show.html.erb

<% @shopping_cart.line_items.each do |line_item| %>

  <div class="row">
    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div class="small-3 columns line-item-total">
        <%= number_to_currency(line_item.total_price) %>
    </div>
  </div>

<% end %>

shopping_carts.js

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    $(".line-item-total").load(location.href + " .line-item-total");
  });
});

Answer 1

能够解决这个问题。该问题与需要为每个 div 创建唯一 ID 有关。这是通过在 div id 本身中使用 line_item id 来实现的。

shopping_carts/show.html.erb

<% @shopping_cart.line_items.each do |line_item| %>

    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div id="line-item-total-<%= line_item.id.to_s %>-container" >
      <div class="small-3 columns" id="line-item-total-<%= line_item.id.to_s %>">
   </div>

<% end %>

shopping_carts.js

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    id = $(data.currentTarget).data().id;
    $("#line-item-total-" + id + "-container").load(location.href + " #line-item-total-" + id);
    $("#cart-calculations").load(location.href + " #cart-calculations");  
  });
});

Rails 4 best_in_place gem 遍历列表显示问题

Rails 4 best_in_place gem display issues with iterating through list

javascript

ajax

ruby-on-rails

best-in-place

ruby-on-rails-4