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に何も追加する必要がなくなりました。 関数を宣言するだけです。 役割について考えることは残っています。 代替としてスタイックスジャムを見てください。

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

Source: https://habr.com/ru/post/J194072/


All Articles