web-dev-qa-db-ja.com

content_forを使用したインラインJavaScriptをrails

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つのビュー内の宣言。時々私はこれにつながるパーシャルを持っています。

javascriptruby-on-railscontent-for
18
TenJack

私は、レイアウトの歩留まりを次のようにすることを強く望んでいます。

<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='test/javascript'>
     function DoMoreMaths() {
       return 3+3;
     }
   </script>
<% end %>

このアプローチの私の理由は、yieldとcontent_forが異なるファイルにあるということです。すべてのcontent_forにスクリプトタグを挿入するのはDRY）ではありませんしかしこれにより、構文ハイライトが各ファイルの言語の変更を認識し、そこで役立ちます。

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

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

31
Tilendor

Htmlで<script>タグの数を最小限に抑えながら、IDE強調表示JavaScriptを使用できるようにしたい場合は、次の解決策があります。1つだけが必要な場合はjqueryで非常に便利です。 $（document）.ready（）htmlまたはfacebook js apiを呼び出して、apiがロードされたときにjsを呼び出すなど...

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の結果は次のようになります。クリーナー。

1
plehoux