[解決済み] Rails 3アプリでページ固有のJavaScriptを追加する最良の方法とは?
2022-04-26 11:18:49
質問
Rails 3には、控えめなJavaScriptがいくつかあり、とてもクールです。
しかし、特定のページに追加のJavaScriptを含めるには、どのような方法がベストなのか疑問に思っていました。
例えば、以前やっていたかもしれないところ。
<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>
のようなもので目立たなくすることができるようになりました。
<%= f.radio_button :rating, 'positive' %>
# then in some other file
$('user_rating_positive').click(function() {
$('some_div').show();
}
そこで質問なのですが、そのJavaScriptをどこに、どのように組み込むのでしょうか?を埋め尽くしたくはないのです。
application.js
このJavaScriptはこの1つのビューにのみ適用されるからです。各ページのカスタムJavaScriptファイルを何らかの方法で含めるか、ヘッダーが探すインスタンス変数に貼り付けるべきでしょうか?
解決方法は?
私がやりたいのは、ビューごとのJavascriptを
content_for :head
ブロックを作成し
yield
をアプリケーションのレイアウトでそのブロックに追加します。例えば
もし、かなり短いのであれば
<% content_for :head do %>
<script type="text/javascript">
$(function() {
$('user_rating_positve').click(function() {
$('some_div').show();
}
});
</script>
<% end %>
または、もっと長い場合は、次に。
<% content_for :head do %>
<script type="text/javascript">
<%= render :partial => "my_view_javascript"
</script>
<% end %>
次に、レイアウトファイルで
<head>
...
<%= yield :head %>
</head>
関連
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] JavaScriptで特定の範囲のランダムな整数を生成する?
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] JavaScript でオブジェクトが特定のプロパティを持つかどうかを確認するにはどうすればよいですか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] Rails 3.1 を使用して、「ページ固有」の JavaScript コードをどこに置くか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
要素ツリー制御によるvueTreeテーブル
-
Vueにシンプルなメモ帳機能を実装
-
vueディレクティブv-bindの使用と注意点
-
vueの補間表現とv-textディレクティブの違いについて
-
Vueでルートネスティングを実装する例
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】Node.js Error: Cannot find module express
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] Rails 3.1 を使用して、「ページ固有」の JavaScript コードをどこに置くか?