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
を返します。
最善のアプローチは何でしょうか?
ボディクローズタグの前と<%= javascript_include_tag 'application' %>
の直後
追加<%= yield :page_scripts %>
次に、特定のビューの任意の場所(通常は上)で、スクリプトを次のように設定します。
<% content_for :page_scripts do %>
<script>alert( "My Nice scripts..." );</script>
<% end %>
これに対する非常に良い答えが 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.");
});
Rails正しく実行された のページ固有のJavascript)もご覧ください。これは一見の価値があります!
インストール後。サンプルコードを見てみましょう。
var ArticlesController = Paloma.controller('Articles');
ArticlesController.prototype.edit = function(){
// Handle edit article
};
つまり、Articlesコントローラーの編集アクションページがある場合です。その後、JavaScriptのみがトリガーされます。これは、他のコントローラーアクションではトリガーされません。