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

Question

我的项目索引页面上有一个下拉列表，它使 ajax 调用索引操作:

 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

我的 populate_projects.js.haml 文件是:

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

这工作正常(ajax 代码不相关)。但现在我想在同一页面添加无限滚动。所以首先我向索引操作添加分页:

 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:

$('#normal').append("#{escape_javascript render(partial: 'projects/projects_list', :locals => {:projects => @projects})}");
- if @projects.next_page
  $('.pagination').replaceWith("#{escape_javascript will_paginate(@projects)}");
  $('.pagination').hide()
-else
  $('.pagination').remove();

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

Answer 1

您可以轻松地向 AJAX 调用添加一个参数(例如 :tab)，该参数告诉您应该更新哪个选项卡。要定义是否应该附加或替换 HTML，只需在 Controller 中的任意位置检查 params[:page] 即可:

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

...或在 View 中:

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

(唯一的一个 View !)。

我一开始以为你一个页面有2个分页，但似乎只是过滤器+分页。

但我仍然不清楚，为什么你使用 #sorted 和 #normal div 以及你创建 2 个 js 文件的目的，作为选项卡的名称，实际上，这是 populate_projects.js 和 index.js 之间的唯一区别。

<小时/>

让我建议另一种方法。

在我看来，Rails 渲染 JavaScript 的方式并不是最好的，因此我会编写简单的 js 来附加和替换数据，并将 if 与索引操作分开。

一开始，我只使用一个 div 来渲染数据(仍然可能有很多选项卡、过滤器等)。然后我将通过 ajax 传递 layout: false ，并在没有布局的情况下渲染索引操作，然后将结果插入 div 中。

然后它将用于过滤器:

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

对于分页:

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

使这些 js 过程独立将使您可以在项目的不同部分使用相同的方法，而创建无用的 if 语句会导致代码不清晰。