0

現在動作している単純なアプリケーションがありますが、ユーザーエクスペリエンスを向上させるために ajax を使用するように変換して、ユーザーがナビゲーションのリンクをクリックするたびにページ全体をリロードする必要がないようにしようとしています。ヘッダー内にナビゲーション バーを含む単純なヘッダー/ボディ/フッター アプローチを使用します。

そのため、現在、ナビゲーション項目のいずれかをクリックすると、Coffeescript を使用して行ったアクティブ状態の CSS ハイライトが正しく変更されます。

以下のコードでわかるように、ナビゲーションの 4 番目のリンクは "new_movie_path" にリンクしています。このページは Nokogiri を使用して Web サイト (IMDB.com など) をクロールし、現在の Box Office トップ 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

ajaxリクエストはMoviesController#new、あなたが言ったようにすでに機能しているに送信する必要があります。リクエストが終了した後に実行したいJavaScriptを含む新しいビューnew.js.erbを追加する必要があります。app/views/movies

# 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 に答える