0

この railscastに従って、私のレールアプリでRack-pjaxを動作させようとしましたが、変更もエラーもありませんでした。関連ファイルは次のとおりです。

宝石ファイル: 

source 'https://rubygems.org'

gem 'rails', '3.2.13'
gem 'bootstrap-sass', '2.1'
gem 'simple_form'
gem 'rspec'
gem 'pg'
gem 'koala', '~> 1.7.0rc1'
gem 'rack-pjax'
gem 'jquery-rails'
gem 'fancybox-rails'

group :development, :test do 
  gem 'sqlite3'
end

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end

config/application.rb:

require File.expand_path('../boot', __FILE__)

require 'rails/all'

if defined?(Bundler)
  Bundler.require(*Rails.groups(:assets => %w(development test)))

end

module Prestongunderson
  class Application < Rails::Application
    config.middleware.use Rack::Pjax

    config.encoding = "utf-8"

    config.filter_parameters += [:password]

    config.active_support.escape_html_entities_in_json = true

    config.active_record.whitelist_attributes = true

    config.assets.enabled = true

    config.assets.version = '1.0'
  end
end

アプリ/アセット/javascripts/application.js:

//= require jquery
//= require fancybox
//= require jquery_ujs
//= require jquery.pjax
//= require_tree .

app/assets/javascripts/static_pages.js.coffee:

$(document).ready ->
    jQuery ->
        $("a.fancybox").fancybox()
    jQuery ->
      $('.local-nav a').pjax('[data-pjax-container]')

アプリ/ビュー/レイアウト/application.html.erb:

<!DOCTYPE html>
<html>
    <%= render 'layouts/header' %>
    <%= render 'layouts/subscribe' %>
    <%= render 'layouts/soundcloud' %>
    <%= render 'layouts/tweet-stream' %>
    <body>

        <div data-pjax-container>
            <%= yield %>
        </div>

        <%= render 'layouts/footer' %>
        <%= render 'layouts/google_analytics' %>
    </body>
</html>

アプリ/ビュー/レイアウト/_header.html.erb

<header>
  ...
    <ul>
        <% ["Home", "Bio", "Gallery", "Music", "Tour", "Videos", "Contact"].each do |page| %>
            <li><%= link_to( page.upcase, @title == page ? "#" : "/#{page.downcase}", class: "local-nav") %></li>
        <% end %>
    ...
  </ul>
  ...
</header>

どこかでコードが競合する可能性はありますか? 不足している他の依存関係はありますか?

編集

これは、Ajax を使用して、リンク要求でのデータのみをロードすることになっていdivますdata-pjax-container。代わりに、ページ全体を読み込みます。これをテストするには、サイド バーにあるメディア プレーヤーで曲を再生し_soundcloud.html.erb、yield の外側に layout でレンダリングします。pjax で設定されたリンクをクリックすると、単一の のみが更新さdivれますが、まったく新しいページが読み込まれ、音楽が停止します。

4

3 に答える 3

0

を使用しても同様の経験がありますpjax-railsが、理由はJS側でも同じはずです。

考えられる理由として、開発サーバーが応答するまでに少し時間がかかることが考えられます。デフォルトでは、Pjax はそれほど長く待つことができないため、通常の HTTP リクエストにフォールバックします。

解決策は、JS にタイムアウト オプションを追加することです。

$('.local-nav a').pjax('[data-pjax-container]', {timeout: 2000})
于 2013-07-03T01:43:52.150 に答える
0

要求サイクルにリダイレクトが含まれていると、pjax が壊れます。それを確認してください。

于 2013-07-03T08:27:13.583 に答える