Rails 4 best_in_place gem显示迭代列表的问题

Question

我按Railscast #302为我的应用购物车安装了best_in_place gem，现在我可以成功更新商品的内联数量，以及使用ajax成功绑定更新包含我购物车中该商品总价的div。但是，当我试图迭代购物车中的完整商品列表时，我会遇到一个奇怪的显示问题。

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

尝试更新任一项目的数量时;但是，每个订单项会显示两列。第一列（在两行中）包含与第一项的总和相匹配的字段，两行中的第二列对第二项的总数相同： < / p>

如果第二个项目的数量发生变化，这个迷路项目会继续正确更新;但是，这两个问题是：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");  
  });
});