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ファイルを好みます。最初のロード後、クライアントのブラウザーにキャッシュされるからです。また、本番環境では縮小および圧縮されます。
関連記事

javascript - 2画像を同時に表示

javascript - 配列から改行を削除する-JavaScript

javascript - JavaScript画像のsrc属性が誤った値を返す

javascript - Angularはファイル名でAPI応答のダウンロードをトリガーします

javascript - JavaScriptでHTMLチェックボックスをループ

javascript - ジェスチャがまだ垂直方向にスクロールしていない場合にのみ、水平方向のパンイベントを許可します

javascript - JavaScriptの配列値をスキップしますか?

javascript - コマンドラインクライアントと対話する

javascript - iPadのフルカレンダーバージョン2のドラッグイベント

javascript - 重複のAngular ng-repeat