PluggableJs-特定のページにJavaScriptを含める簡単で便利な方法

まえがき

アセットパイプラインをオンにしてRails> = 3.1を使用する場合、当然、 require_tree



ディレクティブの下のすべてのスクリプト（およびそれらについて説明します）が単一のファイルに圧縮され、したがって、すべてのページで実行されることがわかります。 しかし、あるページでのみJavaScriptが必要で、別のページでは必要ない場合はどうでしょうか。 見よ！ これはまさにpluggable_jsが解決するものです。

なぜジャム

結局のところ、他の方法があります（誰もビューにコードを記述しないことを望みます）。 おそらく最も明白なのは、必要なテンプレートに書くことです：

 <% content_for :head do %> <%= javascript_include_tag 'my_fancy_js' %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてrequire_tree



からファイルを除外します。 ただし、このアプローチのマイナス点は、特定のコントローラーに関連するスクリプトが同じ場所にないことです（つまり、検索と理解が難しくなります）。 さらに、コードの一部が大きい場合、パイプラインの利点が失われます。 ジャムで使用されるソリューションは、記載されている欠点を最小限に抑えます。

仕組み

カスタムスクリプトを必要とするコントローラーとアクションを選択し、ジェネレーターを実行します。

 rails generate pluggable_js Post index new
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

DOMのロード後にPost.index()



およびPost.new()



関数がPost.index()



れる2つのファイルを生成します。

 app/assets/javascripts/pluggable/posts/index.js.coffee app/assets/javascripts/pluggable/posts/new.js.coffee
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、あなたはそれらをposts.js.coffeeで記述する必要があります：

 window.Post ||= {} Post.index = () -> # your code goes here Post.new = () -> # and here
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、レイアウトに登録されているヘルパー<%= javascript_pluggable_tag %>



は、現在のコントローラー/アクションパラメーターのパスと値が一致する場合、ファイルを接続します。 はい、サーバーへの追加リクエストがありますが、これは単なるトリガーです。



*説明のオプションである微妙な点は省略したため、詳細な手順を参照してください 。

構成

アクション検索を作成して、（アクションインデックスのように）インデックステンプレートをレンダリングするとします。 Post.index()



関数もPost.index()



必要があることがPost.index()



。 これを行うには、config / initializers / pluggable_js.rbを作成し、設定を使用できます：

 PluggableJs.config do |config| config.pair_actions = { 'search' => 'index' } end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

{ 'create' => 'new', 'update' => 'edit' }



デフォルトで登録されています。

最後に

コントローラーに関連するすべてのスクリプトは1つの場所にあります。 すべてのカスタム関数はパイプラインに分類されます。 そして最後に、jsの記述からビューを完全に削除しました。



UPD：コメントありがとうございます。 注意 、ジャムを更新し、config.assets.precompileに何も追加する必要がなくなりました。 関数を宣言するだけです。 役割について考えることは残っています。 代替としてスタイックスジャムを見てください。



貢献してくれたverybigman 、 ExReanimatorおよびowlsに感謝します。