シングルページアプリを...turbolinksのために捨てますか？

あなたのためにPJAXの重労働を行うライブラリはたくさんあります。 Turbolinksはおそらく最もよく知られています。設定は、Gemfileにturbolinksgemを含めるだけです。

gem 'turbolinks' 

...そしてJSをapp/asset / javascripts / application.js

//= require turbolinks

これで、アプリをリロードすると、すべての内部リンクがターボリンクになります。それらをクリックすると、新しいページがAJAX経由で要求され、現在のドキュメントに挿入されます。

jquery-pjaxの実装

ここHoneybadgerでは、元々Githubによって開発されたPJAXライブラリを使用しています。 Turbolinksよりも少し多くの構成が必要ですが、かなり柔軟性があります。

すべてのリンクがPJAXであると想定する代わりに、それを制御できます。また、ページ上のPJAXコンテンツを挿入する場所を制御することもできます。

最初に行う必要があるのは、HTMLにコンテナを追加することです

<div class="container" id="pjax-container">
  Go to <a href="/page/2">next page</a>.
</div>

次に、PJAXリンクを設定する必要があります：

$(document).pjax('a', '#pjax-container')

最後に、PJAXリクエストでレイアウトをレンダリングしないようにrailsに指示します。このようなことをしなければ、ヘッダーとフッターが重複してしまいます。すなわち。あなたのウェブサイトはインセプションのようになります。

def index
  if request.headers['X-PJAX']
    render :layout => false
  end
end

それはそれほど簡単ではありません！

わかりました、それは私が許可したよりも少し複雑です。主に、ほとんどの人が話さない1つの大きな落とし穴が原因です。

ページが読み込まれるたびにDOMがクリアされない場合は、従来のRailsアプリで機能していた可能性のあるJSが非常に奇妙な方法で機能しなくなったことを意味します。

この理由は、私たちの多くが偶発的な名前の競合を助長する方法でJSを書くことを学んだからです。最も陰湿な犯人の1つは、単純なjqueryセレクターです。

// I may look innocent, but I'm not!
$(".something")

$(document).on("click", ".hide-form", function() {
  $(".the-form").hide();
});

# One global name hides two method names
class MyClass
  def method1
  end

  def method2
  end
end

// <input class="tags" type="text" />
// <button class="tag-submit">Save</button>
// <span class="tag-status"></span>

$(".tag-submit").click(function(){
  save($(".tags").val());
  $(".tag-status").html("Tags were saved");
});

// <div class="tags-component">
//   <input type="text" />
//   <button>Save</button>
//   <span></span>
// </div>

$container = $("#tags-component")
$container.on("click", "button" function(){
  save($container.find("input").val());
  $container.find("span").html("Tags were saved");
});

// Bad
$(".foo").blah()

// Ok
$(".foo-component".blah()

.
├── javascripts
|   ├── application.coffee
│   └── components
│       └── tags.coffee
└── stylesheets
    ├── application.scss
    └── components
        └── tags.scss

Initializers = {
  tags: function(el){
    $(el).on("click", "button", function(){  
      // setup component
    });
  }

  // Other initializers can go here
}

// Handler called on every normal and pjax page load
$(document).on("load, pjax:load", function(){
  for(var key in Initializers){
    $("." + key + "-component").each(Initializers[key]);
  }
}

.tags-component {
  input { ... }
  button { ... }
  span { ... }
}