javascript - ターボリンクでJavaScriptの依存関係を読み込む方法

原文 javascript jquery ruby-on-rails datatable turbolinks

Railsアプリケーションでは、ターボリンクとjquery-turbolinksを使用しています。 dataTablesのようないくつかの大きなjavascript依存関係があります。最初に、これらの依存関係をすべてapplication.jsにロードしていましたが、最終的に、プリコンパイル後に1Moに大きなファイルがあるため、依存関係が必要な場合にのみ依存関係をロードします。

次の内容でcustom-datables.coffeというファイルを作成しました。

#= require dataTables/jquery.dataTables
#= require datatables

$(document).ready ->
  console.log $('.data-table').dataTable

私はこれを次のように含めました:

- content_for :javascript do
  = javascript_include_tag 'custom-datatables'

そして、アプリケーションレイアウトの最後にJavaScriptを生成します。

ページを更新すると機能しますが、ターボリンクを使用してこのページに移動すると、$('.data-table').dataTableが未定義であることがわかります。 firefoxのコンソールで$('.data-table').dataTableと入力すると、関数が定義されます。 $(document).readyは、データテーブルが完全にロードされる前にトリガーされるようです。

それを修正する方法はありますか？大きな依存関係をロードすることがベストプラクティスですか？

答え

turbolinksを使用する場合は、ドキュメントの準備ができている代わりに、page:changeイベントを使用する必要があります。

だからあなたの場合:

$(window).bind 'page:change', () ->
  console.log $('.data-table').dataTable

私は通常、1つの大きなapplication.jsファイルを好みます。最初のロード後、クライアントのブラウザーにキャッシュされるからです。また、本番環境では縮小および圧縮されます。

関連記事