0

我试图根据这个 railscast让rack-pjax在我的 rails 应用程序上工作,但我没有注意到任何变化,也没有任何错误。以下是相关文件:

宝石文件:

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

配置/应用程序.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 .

应用程序/资产/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之外,在 yeild 之外呈现。单击使用 pjax 设置的链接时,它应该只更新单曲div,但它会加载一个全新的页面,并停止音乐。

4

3 回答 3

6

您使用的jquery-pjaxAPI 现在似乎已经过时了。根据文档,这条线

$('a.local-nav').pjax('[data-pjax-container]')

应该

$(document).pjax('a.local-nav', '[data-pjax-container]')

顺便说一句,如果您将类设置为链接,您应该使用a.local-nav选择器而不是。.local-nav alocal-nav

于 2013-07-11T08:59:33.863 回答
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 回答