Including inline javascript using content_for in rails

帅比萌擦擦* 提交于 2019-11-29 20:44:42
Tilendor

I much prefer to have the layout's yield look like this:

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

Then in a view you can write:

<% 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" %>

And in the partial _sub_view_with_javascript.html.erb you can also write:

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

My reasoning for this approach is that the yield and content_for are in different files. It is not DRY to put the script tag in for every content_for but it allows the syntax highlighter to recognize the change in language in each file and helps me there.

If you have multiple content_for calls in a single file to the same symbol (in our case, :javascript) I would consider consolidating them all to the top one, but its perfect for use with partials.

And HTML is perfectly happy to have as many script blocks as you would like. The only possible gotcha is when working with the code in developer tools like firebug, it takes a little bit more time to find the right script block for your function. This only happens for me when I need to set a javascript breakpoint to debug.

Here's a solution if you really want to keep the number of < script> tag minimal in your html and still be able to have your IDE highlight javascript. It's really useful with jquery if you want only one $(document).ready() call in your html or with facebook js api to call js when the api is loaded, etc...

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>

any view file:

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

This solution enable me to keep my code organise and readable in my IDE since I don't need to create partial for every js code. Even if it change nothing for the end user the html result is cleaner.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!