【问题标题】：Easy AJAX HTML element replacement with Rails controllers?使用 Rails 控制器轻松替换 AJAX HTML 元素？
【发布时间】：2012-03-02 07:34:18
【问题描述】：

我希望能够有这样的 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 中，要么作为 gem 提供，但如果有，我不知道。

我想理想情况下，它会通过 JS 重新渲染“索引”动作并将更新发送到浏览器，所以它可能看起来更像这样：

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

并且知道替换#things-index（或允许我明确指定它）。

更新

哎呀...当 Prototype 是 Rails 的一部分时，显然有 page.replace_html，但该功能已被 .js.erb 模板方法取代。这对我来说似乎不那么 DRY（大量几乎相同的 js.erb 模板），所以如果有人有解决方案，我将不胜感激。

【问题讨论】：

标签： javascript ruby-on-rails ajax

【解决方案1】：

您可以将任何您想要的内容传递给您的 js.erb，包括要替换的内容以及替换的内容。

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

注意即使在 2012 年，这也不是真正推荐的做这种事情的方式。这些天（2015 年初），鉴于可用的出色客户端技术，我会说它更不推荐了。

【讨论】：

这是我认为最好的解决方案——一个可重复使用的“replaceWith”模板，可跨多个控制器使用。

【解决方案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);
});

【讨论】：