有没有办法在HAML的内部使用Ruby循环:javascript区域?

nop*_*ole 14 javascript ruby haml loops erb

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

这将有效:

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

这不会:

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

上面的代码也可以工作吗?

Phr*_*ogz 13

%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
Run Code Online (Sandbox Code Playgroud)

运行上面的代码给出了这个输出:

<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>
Run Code Online (Sandbox Code Playgroud)

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

编辑Radek:如果你想在Haml模板中声明一个变量,在你的JavaScript过滤器里面(这似乎是一个奇怪的愿望),那么你需要确保块的结果to_s不会产生不需要的输出:

这个哈姆...

%p
  :javascript
    var foo = 12;
    #{x = 42}
    var bar = #{x};
Run Code Online (Sandbox Code Playgroud)

...生成这个HTML:

<p>
  <script type='text/javascript'>
    //<![CDATA[
      var foo = 12;
      42
      var bar = 42;
    //]]>
  </script>
</p>
Run Code Online (Sandbox Code Playgroud)

这个哈姆......

%p
  :javascript
    var foo = 12;
    #{x = 42; ""}
    var bar = #{x};
Run Code Online (Sandbox Code Playgroud)

...生成这个HTML ...

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

      var bar = 42;
    //]]>
  </script>
</p>
Run Code Online (Sandbox Code Playgroud)

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


zed*_*xff 11

这个有效

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