Rails javascript_include_tag 到底应该放哪?

Peter · June 28, 2016 · Last by jasl replied at June 29, 2016 · 3048 hits

大家好,这个问题困扰我一段时间了。

一般来说,跟 jQuery 一起用的时候,要把 turbolinks 放在 application.js 最后,

gem 'jquery-turbolinks'

/app/assets/javascripts/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery-ui


$( document ).ready(function() {
    console.log( "ready!" );
    ......
});

//= require turbolinks

然后,为了让 js 加载不会影响到网页呈现的速度,我们一般会把 javascript_include_tag 放在末尾。 /app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Ruby China</title>
  ...
  <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body class="Site">
...
  <%= yield %>
  <%= render partial: 'common/footer' %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</body>
</html>

so far so good. 现在问题来了。如果我在某个特定页面要在 footer 之上添加一个 $( document ).ready(function() {...});,结果这时候 jQuery 都还没有加载呢。如果我把它添加到 ·application.js,也有问题,首先,这不是一个全局使用的功能,其次,在不用这个功能的页面因为找不到特定的 div (id 或 class),也会报错。

结果折腾了一圈,还是要把 javascript_include_tag 放在 <header> 里面,stylesheet_link_tag 的下面。

还有个讨巧的方法,就是在 /app/views/layouts/application.html.erb 文件末尾,加上判断语句:

<body class="Site">
...
  <%= yield %>
  <%= render partial: 'common/footer' %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <% if controller_name=='pages' && action_name=='index' %>
  <script>
   ...
  </script>
<%end%>

个人觉得太不处女座了,在这放一堆跟 layout 无关的逻辑代码。

js 放在哪,有没有谁有更好的建议,谢谢!

PS: 帖子最上面的 turbolinks 用法是否正确,也请大家斧正。

可以在 layout 文件中放置代码占位

<body class="Site">
...
<%= yield %>
<%= render partial: 'common/footer' %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= yield :custom_js %>
</body>

然后在需要额外 script 的页面

<%= content_for :custom_js do %>
  <script>
    // your script code
  </script>
<%- end %>

#1 楼 @geekontheway 谢谢!

如果有的页面没有定义 custom_js ,也不会出错吗?

#2 楼 @peter

不会,放心用,不过 yield :custom_js 通常放在布局里的,所以没定义的情况应该是极小可能

Peter in 基于 Rails 5 的 B2C 电商开源项目 mention this topic. 20 Mar 19:06
You need to Sign in before reply, if you don't have an account, please Sign up first.