21

content_for と yeild を使用して JavaScript ファイルをレイアウトの下部に挿入していますが、インライン JavaScript を含めるためのベスト プラクティスは何か疑問に思っています。具体的には、スクリプト型宣言をどこに置くのか疑問に思っています:

<% content_for :javascript do %> 
  <script type="text/javascript"> ... </script>
<% end %>

また

<% content_for :javascript do %> ... <% end %>
  <script type="text/javascript">
    <%= yield :javascript %>
  </script>
<% end %>

私は現在最初のオプションを使用しており、複数を含めるのが悪いかどうか疑問に思っています

...

1 つのビュー内での宣言。時々、これにつながるパーシャルがあります。

4

2 に答える 2

33

私は、レイアウトの歩留まりを次のようにすることを好みます。

<html>
  <!-- other stuff -->
  <body>
   <!-- other stuff  -->
   <%= yield :javascript %>
  </body>
</html>

次に、ビューで次のように記述できます。

<% content_for :javascript do %>
  <script type='text/javascript'>
    function doMagic() {
      //Mind-blowing awesome code here
    }
  </script>

<% end %>

<!-- More view Code -->

<%= render :partial => "sub_view_with_javascript" %>

また、部分的な _sub_view_with_javascript.html.erb では、次のようにも記述できます。

<% content_for :javascript do %>
  <script type='text/javascript'>
     function DoMoreMaths() {
       return 3+3;
     }
   </script>
<% end %>

このアプローチの理由は、yield と content_for が別のファイルにあるからです。すべての content_for にスクリプト タグを挿入するのは DRY ではありませんが、シンタックス ハイライターが各ファイルの言語の変更を認識できるようになり、その点で役立ちます。

同じシンボル (この場合は :javascript) に対して 1 つのファイルに複数の content_for 呼び出しがある場合、それらをすべて一番上のものに統合することを検討しますが、パーシャルでの使用には最適です。

そして、HTML は、必要な数のスクリプト ブロックを完全に満足しています。唯一の落とし穴は、firebug などの開発者ツールでコードを操作する場合、関数に適したスクリプト ブロックを見つけるのに少し時間がかかることです。これは、デバッグする JavaScript ブレークポイントを設定する必要がある場合にのみ発生します。

于 2010-03-17T18:14:44.807 に答える
1

HTML 内の < script> タグの数を最小限に抑え、IDE で JavaScript を強調表示したい場合の解決策を次に示します。HTMLで $(document).ready() 呼び出しを1つだけしたい場合、またはfacebook js APIを使用してAPIがロードされたときにjsを呼び出す場合など、jqueryで非常に便利です...

layout_helper.rb :

  def javascript_jquery_ready(script)
    content_for(:javascript_jquery_ready) {
      script .gsub(/(<script>|<\/script>)/, "")
    }
  end

application.html.erb :

<script>
    $(document).ready(function(){
        <%= yield(:javascript_jquery_ready) %>
    });
</script>

任意のビュー ファイル:

<% javascript_jquery_ready (capture do %>
  <script>
    $('#share_access_link').click(function(){
      $('#share_access_form').slideToggle();
    }); 
  </script>
<% end) %>

このソリューションにより、すべての js コードの部分を作成する必要がないため、IDE でコードを整理して読みやすくすることができます。エンド ユーザーにとって何も変わらなくても、html の結果はよりクリーンになります。

于 2011-03-22T20:17:41.567 に答える