터보 링크로 자바 스크립트 종속성을로드하는 방법

Question

레일 애플리케이션에서 터보 링크 및 jquery-turbolinks를 사용하고 있습니다. dataTables와 같은 몇 가지 큰 자바 스크립트 종속성이 있습니다. 첫째, application.js에 대한 모든 종속성을로드하고 있었지만 결국에는 프리 컴파일 이후 1Mo에 큰 파일을 가지고 있으므로 필요할 때만 종속성을로드하려고합니다.

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

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

내가 이런 식으로 포함 :

나는이 콘텐츠와 custom-datables.coffe라는 파일이 생성

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

을 그리고 난 내 응용 프로그램 레이아웃의 끝에서 자바 스크립트를 얻을 수 있습니다.

페이지를 새로 고칠 때 작동하지만 터보 링크를 사용하여이 페이지로 이동할 때 $('.data-table').dataTable이 정의되지 않음을 알 수 있습니다. firefox의 콘솔에 $('.data-table').dataTable을 입력하면이 함수가 정의됩니다. $(document).ready은 데이터 테이블의 전체로드 전에 트리거 된 것처럼 보입니다.

해결 방법이 있습니까? 큰 의존성을로드하는 것이 가장 좋은 방법입니까?

Answer 1

turbolinks을 사용할 때 문서 준비가 아닌 page:change 이벤트를 사용해야합니다. 따라서 귀하의 경우

는 : 후 첫 번째가 고객의 브라우저에 캐시됩니다로드 때문에

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

나는 일반적으로 하나 개의 큰 application.js 파일을 선호합니다. 또한 생산시에는 압축되고 압축됩니다.