Rails 4 проблемы с отображением gem_in_place с повторением по списку

Question

Я следовал Railscast #302, чтобы установить 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. Это было выполнено с использованием идентификатора line_item в самом id div.

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"); 
    }); 
});