在 Rails 中使用 content_for 包含内联 JavaScript

发布于 2024-08-25 22:41:01 字数 527 浏览 4 评论 0原文

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

包含多个声明是否不好

...

我现在使用第一个选项，想知道在一个视图中。有时我的部分原因会导致这种情况。

原文

I am using content_for and yeild to inject javascript files into the bottom of my layout but am wondering what the best practice is for including inline javascript. Specifically I'm wondering where the put the script type declaration:

<% content_for :javascript do %> 
  <script type="text/javascript"> ... </script>
<% end %>

<% content_for :javascript do %> ... <% end %>
  <script type="text/javascript">
    <%= yield :javascript %>
  </script>
<% end %>

I am using the first option now and wondering if it is bad to include multiple

...

declarations within one view. Sometimes I have partials that lead to this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟沫凡尘 2024-09-01 22:41:01

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

<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 添加脚本标记并不干燥，但它允许语法突出显示器识别每个文件中语言的变化并为我提供帮助。

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

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

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='text/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 it's 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 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.

回复收藏 0 原文

仲春光 2024-09-01 22:41:01

如果您确实想保留 < 的数量，这里有一个解决方案脚本>在您的 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 结果也会更干净。

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.

回复收藏 0 原文

~没有更多了~