web-dev-qa-db-ja.com

Rails jsファイルとページ固有のjs

On RailsすべてのJavaScriptファイルをアプリケーションのjsファイルに入れました。

//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr

//VENDOR JS BEGINS
//= require pace/pace.min
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker

次に、application.html.erbの先頭にあるjavascriptを次のように呼び出します。

...
<head>
..
<%= javascript_include_tag 'application' %>    
..
</head>
...

次に、Webサイトの速度を確認し、このJS呼び出しを実行することをお勧めします。ところで、私はすべきだと知っています。しかし、問題はページ固有のJSコードにあります。

ユーザーが日付を選択するhome.html.erbがあると想像してください。そこで、このページにデータピッカーコードを配置しました。

本文の下部に<%= javascript_include_tag 'application' %>を取り込むと、今回はjqueryとdatepickerがまだロードされていないため、ページ固有のJSはno method errorを返します。

最善のアプローチは何でしょうか？

javascriptjqueryruby-on-railsasset-pipeline
12
Shalafister's

ボディクローズタグの前と<%= javascript_include_tag 'application' %>の直後

追加<%= yield :page_scripts %>

次に、特定のビューの任意の場所（通常は上）で、スクリプトを次のように設定します。

<% content_for :page_scripts do %>
  <script>alert( "My Nice scripts..." );</script>
<% end %>
8
Mat

これに対する非常に良い答えが http://brandonhilkert.com/blog/page-specific-javascript-in-Rails/ にあります。

基本的には、app/views/layouts/application.html.erbを開いて、ページをレンダリングするたびにコントローラーとビューの情報を提供するように説得します。これを行うには、bodyタグをから変更します

<body> 
  <%= yield %>
</body

に

<body class="<%= controller_name %> <%= action_name %>">
  <%= yield %>
</body>

したがって、Railsがbodyタグをレンダリングすると、コントローラーのクラスとコントローラー内のアクションの1つが追加されます。

Static_pagesというコントローラーがあり、static_pagesコントローラーに

def home 
end

Railsがビュー/ページをホームにレンダリングすると、bodyタグにstatic_pagesのクラスとhomeのクラスが追加されます。

<body class="static_pages home">
    the home view is rendered here
</body>

これはサイト全体の変更になるため、indexページ/ビューにsersコントローラーから移動すると、bodyタグは次のようになります。

<body class="users index">
    the index view is rendered here
</body>

次に、vendor/assets/javascripts /jquery-readyselector.jsというファイルを作成します。

(function ($) {
  var ready = $.fn.ready;
  $.fn.ready = function (fn) {
    if (this.context === undefined) {
      // The $().ready(fn) case.
      ready(fn);
    } else if (this.selector) {
      ready($.proxy(function(){
        $(this.selector, this.context).each(fn);
      }, this));
    } else {
      ready($.proxy(function(){
        $(this).each(fn);
      }, this));
    }
  }
})(jQuery);

そのファイルは、application.jsで適切に参照されている必要があります

...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-readyselector
//= require_tree .

すべてが完了したら、次のように、テストするビューに固有の簡単なアラートを作成してテストできます。

// app/assets/javascripts/static_pages_home.js

$(".static_pages.home").ready(function() {
  return alert("You should only see this on the static pages home page.");
});


// app/assets/javascripts/user_index.js

$(".users.index").ready(function() {
  return alert("You should only see this on the users index page.");
});

アクションを参照しないことで、スクリプトコントローラーを特定にすることもできます。

$(".users").ready(function() {
  return alert("You should only see this on a users controller controlled page.");
});
7
Jeremy

Rails正しく実行された のページ固有のJavascript）もご覧ください。これは一見の価値があります！

インストール

インストール後。サンプルコードを見てみましょう。

var ArticlesController = Paloma.controller('Articles');

ArticlesController.prototype.edit = function(){
  // Handle edit article
};

つまり、Articlesコントローラーの編集アクションページがある場合です。その後、JavaScriptのみがトリガーされます。これは、他のコントローラーアクションではトリガーされません。

1
AnkurVyas