Question

我的项目索引页面上有一个下拉列表，它对索引操作进行了ajax调用：

function StartSpin(){
...
        var cone;
        var ctwo;
        var cthree;
...
        if(one == 1){var cone = "Ace";} // here remove var, otherwise JS will scope it to the IF.
        if(two == 1){var ctwo = "Ace";}
        if(three == 1){var cthree = "Ace";}
...
    }

我的populate_projects.js.haml文件是：

 def index
      @projects = sorted_projects # sort projects on basis of dropdown selection
    respond_to do |format|
      format.html
      format.js { render 'populate_projects' }
    end
  end

这很好（ajax代码无关紧要）。但现在我想在同一页面添加无尽的滚动。首先，我为索引操作添加了分页：

:plain
  $("#sorted").html("#{escape_javascript render(partial: 'projects/projects_list')}");
  $("#normal").hide();
  $("#sorted").show();

我的ajax部分工作但是在调用之后我需要执行index.js.haml：

 def index
      @projects = sorted_projects
      @projects = @projects.paginate(page: params[:page], per_page: 9)
    respond_to do |format|
      format.html
      format.js { render 'populate_projects' }
    end
  end

所以，现在问题是当分页进行ajax调用时如何告诉索引操作呈现'index.js.haml'但是当下拉使得ajax全部它应该渲染'populate.js.haml'时

Answer 1

您可以轻松地向AJAX调用添加一个参数（例如:tab），该调用指示应更新哪个选项卡。要定义是否应该追加或替换HTML，只需在控制器中的任意位置选中params[:page]：

format.js do
  if params[page]
    render 'populate_projects'
  else
    render 'index'
  end
end

...或在视图中：

- if params[:page]
  $("#{params[:tab]}").append()
- else
  $("#{params[:tab]}").html()

（唯一一个视图！）。

我首先想到，你在一个页面上有2个分页，但它似乎只是过滤器+分页。

但是对我来说仍然不清楚，为什么你使用#sorted和#normal div，为了你创建2个js文件的目的，对于tab的名称，实际上是{之间的唯一区别{1}}和populate_projects.js。

让我建议另一种方法。

Rails-渲染JavaScript的方式对我来说不是最好的，所以我会编写简单的js来追加和替换数据，并从索引操作中分离出来。

首先，我只使用一个div来渲染数据（可能还有很多标签，过滤器等等）。然后我将通过ajax传递index.js，并在没有布局的情况下渲染索引操作，然后在div中插入结果。

然后它将用于过滤器：

layout: false

分页：

$.ajax
  url: 'projects.html'
  data:
    layout: true
  success: (data)->
    ('#container_with_projects').replaceWith(data)

使这些js程序独立将允许您在项目的不同部分使用相同的方法，而创建无用的$.ajax url: 'projects.html' data: layout: false success: (data)-> ('#container_with_projects').append(data)语句会导致代码不清楚。

选择具有相同操作的不同js文件

1 个答案: