在 rails 中使用 content_for 包括内联 javascript答案

【问题标题】：Including inline javascript using content_for in rails在 rails 中使用 content_for 包括内联 javascript
【发布时间】：2010-03-17 17:54:12
【问题描述】：

我正在使用 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 %>

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

...

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

【问题讨论】：

您的用例是什么？这是动态生成的js吗？
动态生成js的例子是什么？有时我需要在运行时将变量从视图传递给 javascript 函数。

标签： javascript ruby-on-rails content-for

【解决方案1】：

我更喜欢让布局的产量看起来像这样：

<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）有多个 content_for 调用，我会考虑将它们全部合并到顶部，但它非常适合与部分一起使用。

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

【讨论】：

我读到最好将 javascript 放在布局末尾的

【解决方案2】：

如果你真的想在你的 html 中保持标记的数量最少并且仍然能够让你的 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 结果也更清晰。

【讨论】：