Rails 3.1(Styx)でのJSアセットの構造化

3.1のアセットメカニズムは、大規模プロジェクトの寿命を大幅に簡素化しましたが、同時に小規模プロジェクトでは少し複雑になりました。 ビルトインジェネレーターを使用する場合、以前のようにレールはコントローラーごとに個別のファイルを作成し、これらのファイルのコンテンツのみがデフォルトで絶対にすべてのページに表示されるようになりました。 SCSSの場合、これが正しい構造化を課すのに役立つだけなら、JSで何をすべきか?

プロジェクトが大きく、大規模なJSにBackboneなどのクライアントフレームワークを使用する場合-すばらしい! 読み込みが改善され、どこでどのように動作するかが決まります。 しかし、特定のページに少量のコードを接続するだけならどうでしょうか? つまり、コントローラーではなく、アクションです。 そして、そのような断片が5を超えても、コードがスパゲッティにならないことが望ましいです。 小さなStyx gemがこれに役立ちます。

Styxは特定のアクションに対して特定のコードを呼び出すだけでなく、Rubyからデータを転送することもできます。 料理:

# Gemfile gem 'styx' # app/controllers/application_controller.rb    controller class ApplicationController include Styx::Initializer end # app/views/application.html.erb <%= javascript_include_tag "application" %> <%= styx_initialize %> <%= csrf_meta_tags %> 


`rails g foos 'を使用して作成したFoosControllerコントローラーがある場合は、努力によってapp / controllers / foos_controller.rbだけでなく、app / assets / javascripts / foos.js.coffeeもあります。 後者は次のようになります。

 #        Styx.Initializers. @Styx.Initializers.Foos = initialize: -> console.log '        action  foos     <head>' index: (data) -> console.log '       /foos/     <head>' show: (data) -> $ -> console.log '    (  jQuery)       /foos/... (. jQuery.ready())' 


すべてのメソッド(一般的な初期化を除く)がdataパラメーターを受け入れることに注意してください。 デフォルトでは、これは空のオブジェクト{}ですが、コントローラーとビューの両方でルビー側から簡単に補充できます。

 # app/controllers/foos_controller.rb class ApplicationController def index styx_initialize_with :foo => 'bar', :and => {:habrahabr => 'rockz!'} end end 


 # app/views/foos/index.html.erb <%- styx_initialize_with :something => 'very important' %> 


データを取得します。

 {"foo": "bar", "and": {"habrahabar": "rocks!"}, "something": "very important"} 


コードを呼び出すのに必要なことはそれだけです。 JSは単一のファイルにアセンブルされ、全体として接続されているため、クラス(Coffeeのおかげでクラス)で繰り返しコードを簡単に記述し、Initializerを使用して必要なページで呼び出すことができます。 そして素敵なボーナスとして-あなたのビューでJSにデータを転送するための「.to_json」のダンプはもうありません:)。

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


All Articles