jQuery Ajax 调用后 Rails View 不更新

Question

我正在进行我的第一个 Rails 项目，并且已经到了想要根据 SELECT 标记的值更改模型索引的 ORDER BY 的阶段。

我的 index.html.erb 中有以下 onchange

<div id="sortBy">
        <span>Sort by:</span>
        <%= select_tag "sort_by", options_for_select([ "Newest first", "Oldest first" ], "Newest first"), { :onchange => "changeSortOrderJs(this.value)" } %>
</div>

这应该更新：

<% @horses.each do | horse | %>
   <%= horse.name %>
<% end %>

这会在我的咖啡脚本资产中调用以下方法（以 @ 为前缀，因为它是一个匿名函数）：

@changeSortOrderJs = (val) ->
  $.ajax
    type: 'GET'
    url: '/horses'
    data: order: val

这映射到我在 HorsesController 中的索引操作

def index
        order = params[:order]

        if(order == nil) 
            order = 'Newest first'
        end

        @horses = Array.new

        if order == 'Newest first'

            @horses = Horse.all.order("created_at DESC")

        elsif order == 'Oldest first'

            @horses = Horse.all.order("created_at ASC")
        end

        //tried this later but didn't work either
        respond_to do |format|
            format.html
        end
    end

我可以在我的 development.log 中看到它正在工作，并且 @horses 正在以正确的顺序填充。但是视图没有刷新。

如果我在 ajax 调用中使用 respond_with(@horses) 然后成功回调，即

@changeSortOrderJs = (val) ->
  $.ajax
    type: 'GET'
    url: '/horses'
    data: order: val
    success: (result) ->
      $('body').html(result)

然后它确实起作用了，马被重新排序。但我宁愿不这样替换整个身体。

我认为实例变量的全部意义在于您可以重新定义它们并且视图会自动更新？

Answer 1

实例变量不只是神奇地更新页面。您必须像在最后一段代码中那样使用成功函数。如果你想要即时更新，你应该考虑使用Knockout.js 或类似的东西

此外，如果您计划渲染部分内容，则必须在 Coffeescript 文件之外执行此操作。例如，在您的控制器中执行以下操作：

respond_to do |format|
  format.js
end

和 app/controllers/horses/index.js 一样：

container = $('#your_div_here');

<% @horses.each do |horse| %>
  container.prepend( "<%= j render( :partial => 'horses/horse', :locals => { :horse => horse } ) %>" );
<% end %>