1. ホーム
  2. 質問と答え
  3. Rails jsファイルとページ固有js

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

2016-12-20 15 views
3

すべてのJavaScriptファイルをアプリケーションjsファイルに入れます。Rails jsファイルとページ固有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> 
...

次に、私はウェブサイトの速度をチェックして、私はこのJSコールを身につけることを提案します。私は私が知っておくべきことを知っている。しかし、問題はページ固有のJSコードにあります。

私がhome.html.erbのユーザーが日付を選択したとします。だから私はこのページにdatapickerのコードを入れました。

ページ特定JSはno method error

を与えるようjqueryの&日付ピッカーが最善のアプローチがどうなるかはまだロードされていないので、私は体の下、この時点でに<%= javascript_include_tag 'application' %>を取る場合は？非常に良いがあり

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

出典

2016-12-20 Shalafister' s

+0

あなたはターボリンクを使用していないと思いますか？そうでない場合は、各ナビゲーションのHTML全体（アセットを含む）をロードしていることを意味します。その場合、パフォーマンスを向上させたい場合は、すべてを一度だけロードする方法（ターボリンクや角度のようなajaxアプリなど）を最優先にする必要があります。 –

答えて

2

身体終了タグの前に、ちょうど<%= javascript_include_tag 'application' %>

後に次にどこにでも（通常は上部の）特定のビューで<%= yield :page_scripts %>

を追加するには、を使用してスクリプトを設定しますこれにはhttp://brandonhilkert.com/blog/page-specific-javascript-in-rails/で答えてください。

基本的には、app/views/layouts/application.html.erbを開いて、ページをレンダリングするたびにコントローラと情報を表示するようにします。あなたがそう

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

に

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

からbodyタグを変更するためには、レールがbodyタグをレンダリングするとき、それは今コントローラおよびコントローラのアクションのいずれかのクラスを追加します。

あなたはstatic_pagesと呼ばれるコントローラを持っている、とレールがビュー/ページホームをレンダリングするときstatic_pagesコントローラが

def home 
end

を持って、それは今static_pagesのbodyタグクラスとのクラスに追加されますと言います家。あなたはコントローラは、bodyタグは次のようになりユーザーからインデックスページ/ビューに移動しますので、もし

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

これは、サイト全体の変更になります。

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

を今、作ります含むファイルと呼ばれるベンダー/資産/ JavaScriptの/ 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);

ファイルが正しく参照されなければならないことをアプリケーションで。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."); 
});

出典

2016-12-20 20:58:14 Mat

0

Page-specific Javascript for Rails done rightもご覧ください。これは価値がある！インストール後

Installation

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

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

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

これは、記事コントローラの編集アクションページがある場合は、そのことを意味します。その後、javascriptだけがトリガーされます。これは他のコントローラーアクションでは起動されません。

出典

2017-07-11 07:00:47 AnkurVyas

+1

ソリューションへのリンクは歓迎しますが、あなたの答えはそれが無ければ有用であることを確認してください：[リンクの前後にコンテキストを追加]（// meta.stackexchange.com/a/8259）あなたの仲間のユーザーは、なぜそれがあるのか​​、ターゲットページが利用できない場合にリンクしているページの最も関連性の高い部分を引用します。 [リンク以上の回答は削除される可能性があります。]（// stackoverflow.com/help/deleted-answers） – g00glen00b

+0

アドバイスをいただきありがとうございます@ g00glen00b！ – AnkurVyas

+0

よく見えますが、質問に対処するためにこの回答を調整することができます。今はリンク+サンプルコードを説明していますが、サンプルコードはその質問に答えていますか？ – g00glen00b

関連する問題

 関連する問題