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

我现在使用第一个选项，想知道是否包含多个

...

一个视图中的声明。有时我有导致这种情况的部分。

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 放入 script 标签并不是 DRY，但它允许语法高亮显示每个文件中的语言变化并在那里帮助我。

如果您在单个文件中有多个 content_for 调用同一个符号（在我们的例子中是 :javascript），我会考虑将它们全部合并到顶部，但它非常适合与部分一起使用。

HTML 非常乐意拥有任意数量的脚本块。唯一可能的问题是，在使用 firebug 等开发人员工具中的代码时，需要花费更多时间来为您的函数找到正确的脚本块。这只发生在我需要设置 javascript 断点进行调试时。

于 2010-03-17T18:14:44.807 回答
1

如果您真的想在 html 中保持 < script> 标记的数量最少并且仍然能够让您的 IDE 突出显示 javascript，那么这是一个解决方案。如果您只想在 html 中调用一个 $(document).ready() 或使用 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) %>

这个解决方案使我能够在我的 IDE 中保持我的代码组织和可读性，因为我不需要为每个 js 代码创建部分。即使它对最终用户没有任何改变，html 结果也更清晰。

于 2011-03-22T20:17:41.567 回答