有没有办法在 HAML 的 :javascript 区域内使用 Ruby 循环？答案

【问题标题】：Is there a way to use a Ruby loop inside of HAML's :javascript region?有没有办法在 HAML 的 :javascript 区域内使用 Ruby 循环？
【发布时间】：2011-02-27 01:46:55
【问题描述】：

在 HAML 内部，我们可以在 :javascript 区域内有一个循环吗？

这将起作用：

- 10.upto(20) do |i|
  :javascript
    document.getElementById('aDiv').innerHTML += '#{i}';

这不会：

:javascript
  - 10.upto(20) do |i|
    document.getElementById('aDiv').innerHTML += '#{i}';

上面的代码也能正常工作吗？

【问题讨论】：

标签： javascript ruby loops haml erb

【解决方案1】：

这个有效

%script
  - 10.upto(20) do |i|
    document.getElementById('aDiv').innerHTML += '#{i}';

【讨论】：

有效。尽管缺少 type='text/javascript' 和 CDATA，但它仍然有效。

【解决方案2】：

%html
  %head
    :javascript
      var foo = [];
      #{
        limit = rand(4)+3
        array = (0..limit).to_a
        array.map{ |i| "foo[#{i}] = #{rand(12)};" }.join ' '
      }
      console.log(foo.length);
    %body

运行上面的代码会得到这个输出：

<html>
  <head>
    <script type='text/javascript'>
      //<![CDATA[
        var foo = [];
        foo[0] = 2; foo[1] = 0; foo[2] = 11; foo[3] = 8; foo[4] = 0; foo[5] = 1;
      //]]>
    </script>
    <body></body>
  </head>
</html>

如您所见，#{...} 大块（可能跨越多行）运行任意 Ruby 代码。最后一个表达式的结果（在本例中为 map{...}.join）被转换为字符串并放在输出中。

Edit for Radek：如果你想在你的 Haml 模板中，在你的 JavaScript 过滤器中声明一个变量（这似乎是一个奇怪的愿望），那么你需要确保块 to_s 不会产生不需要的输出：

这个哈姆...

%p
  :javascript
    var foo = 12;
    #{x = 42}
    var bar = #{x};

...生成此 HTML：

<p>
  <script type='text/javascript'>
    //<![CDATA[
      var foo = 12;
      42
      var bar = 42;
    //]]>
  </script>
</p>

而这个哈姆...

%p
  :javascript
    var foo = 12;
    #{x = 42; ""}
    var bar = #{x};

...生成这个 HTML...

<p>
  <script type='text/javascript'>
    //<![CDATA[
      var foo = 12;

      var bar = 42;
    //]]>
  </script>
</p>

但在你这样做之前，问问自己：我为什么要在我的视图中创建复杂的 Ruby 变量？
我的控制器不应该声明这个变量吗？

【讨论】：

如果我只想定义一个变量怎么办？在:javascript 块内？

【解决方案3】：

只是想补充一点，以下内容可以为您提供类型和 CDATA，但没有 :javascript 的时髦行为（我只需要实现类似的东西）。

%script{ :type => 'text/javascript' }
  \//<![CDATA[
  - (10..20) do |i|
    document.getElementById('aDiv').innerHTML += '#{i}';
  \//]]>

【讨论】：