0

我有一个当前正在运行的简单应用程序，但我正在尝试将其转换为使用 ajax 以改善用户体验，以便每次用户单击导航中的链接时都不需要重新加载整个页面。它使用简单的页眉/正文/页脚方法，导航栏包含在页眉内。

所以目前，当我点击我的任何导航项目时，它会正确更改活动状态 CSS 突出显示，这是我使用 Coffeescript 完成的。

正如您将在下面的代码中看到的，我在导航中的第 4 个链接链接到“new_movie_path”。此页面使用 Nokogiri 抓取网站（例如 IMDB.com）并显示当前票房排名前 10 的电影，因此它可能需要一些时间才能完成，并且不会立即加载。这个模块单独工作得很好。

我想要做的是，当我单击该链接时，它不会刷新页面，而是使用 ajax 调用获取数据并在我当前布局的正文中显示结果。我已将remote: true元素添加到链接中，但经过多次试验和错误未能弄清楚其余部分。奖励：加载数据时会出现一个微调器。

我现有代码的片段：

/app/views/layout/application.erb.html

<body>
  <%= render 'shared/header' %>
  <div class="container first-contain" id="body-content">
    <%= yield %>
  </div>
</body>

/app/views/shared/_header.html.erb

<ul class="nav">          
  <li class="active"><%= link_to "Home", "#" %></li>
  <li><%= link_to "About", "#" %></li>
  <li><%= link_to "Contact", "#" %></li>
  <li><%= link_to "New Movies", new_movie_path, remote: true %></li>
</ul>

/app/assets/javascripts/navigation.js.coffee

$ ->
  changeTab = (e) ->
    e.preventDefault()
    $("ul.nav li.active").removeClass "active"
    $(@).addClass("active")
  $("ul.nav li").click changeTab

非常感谢您对此事的任何帮助。

4

2 回答 2

1

您需要另一个文件来处理 AJAX 请求。假设电影链接将您带到“放映”操作，那么您将有一个movies/show.js.erb视图模板文件。

假设该动作爬取了 IMDB 并在其中填充了一系列电影名称@movies

您的视图文件可能如下所示：

<% 
  if @movies
    out = ''
    @movies.each do |m|
      out += m + '\n'
    end
%>
$("#body").html('<%= out %>');
<% end %>

这假设您当然使用的是 jquery（并且您应该是）。本质上，您必须以一种或另一种方式使用 javascript 来替换 HTML 正文的内容。

于 2013-02-01T10:25:08.007 回答
0

MoviesController#new如您所说，ajax 请求应该将您发送到已经在工作的地方。您需要添加一个名为new.js.erbunder的新视图，app/views/movies该视图将包含您要在请求完成后运行的 javascript，即

# movies_controller.rb
def new
  @movies = parse_movies_from_imdb
end

# new.js.erb
<% @movies.each do |movie| %>
  console.log(movie);
<% end %>
于 2013-02-01T07:58:09.103 回答