Легкая замена HTML-элемента AJAX с контроллерами Rails?

Question

Я бы хотел иметь частичку ERB, как это:

<ul id='things-index'>
  <% @things.each do |t| %>
    <li><%= t.name %></li>
  <% end %>
</ul>

И сможете обновить его в контроллере так:

class ThingsController < ApplicationController
  def create
    @thing = Thing.new(params[:thing])
    @thing.save

    respond_to do |format|
      format.html
      format.js do
        @things = Thing.all
        page.replace('things-index')
      end
    end
  end
end

Это означает, что JavaScript будет отправлен в качестве ответа, без необходимости подробно описывать шаблон js.erb, например: create.js.erb:

$('#things-index').replaceWith('<%= escape_javascript(render("things/index")) %>')

Возможно, что-то подобное уже есть, либо встроено в Rails, либо доступно в виде гема, но если это так, я не знаю об этом.

Полагаю, в идеале, он бы повторно обработал действие index через JS и отправил бы обновление в браузер, так что это может выглядеть примерно так:

respond_to do |format|
  format.html
  format.js do
    render 'index'
  end
end

И знаете, чтобы заменить #things-index (или позвольте мне явно указать его).

Обновление

Упс ... Видимо, было page.replace_html, когда Prototype был частью Rails, но эта функциональность была заменена методом шаблона .js.erb. Мне это кажется намного менее СУХИМЫМ (тонны почти идентичных js.erb шаблонов), поэтому, если у кого-то есть решение, я буду признателен.

Answer 1

Вы можете передать на js.erb все, что захотите, включая то, что заменить и чем.

$('<%= @id %>').replaceWith('<%= escape_javascript(render(@renderable)) %>')

Примечание Даже в 2012 году это не было действительно рекомендованоспособ делать такие вещи, как это.В эти дни (в начале 2015 года) я бы сказал, что это еще менее рекомендуется, учитывая отличные технологии на стороне клиента.

Answer 2

Другим решением было бы отправить обратно только данные, чтобы клиент отображал их при выборе:

respond_to do |format|
  format.html
  format.json do
   @things = Thing.all
   render :json => @things
  end
end

А на стороне клиента:

function updateList(data){
  var $item,
      $list = $('#things-index');

  $list.find('li').remove();

  $.each(data, function(i, item){
    $item = $('<li />').text(item.name);
    $list.append($item);
  });  
}

$.getJSON('/my/route.json', function(data){
  updateList(data);
});