HAML - 如何创建这一行HTML

Question

这是在HAML中创建的一个复杂的HTML行:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

我不知道该怎么做.任何的想法？我只能这样做:

%a.btn
  %span.icon-bar Hello

但不知道如何做复杂的事情.

谢谢!

Answer 1

%a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"}

要不然

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}}

因为在这一行中没有红宝石,所以在这里使用哈希火箭语法没有帮助.`%a.btn.btn-navbar(data-target =".nav-collapse"data-toggle ="collapse")`对于没有计算属性值的节点更有帮助. (5认同)

Answer 2

多个类可以链接在一起:

%a.btn.btn-navbar

得到:

<a class='btn btn-navbar'></a>

可以使用单个:data哈希指定自定义数据属性:

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}}

得到:

<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'></a>