Haml :: SyntaxError - 非法嵌套:内容不能与%a在同一行上给出并嵌套在其中

Question

我正在使用来自Twitter Bootstrap和HAML的"按钮下拉列表".在Bootstrap文档中,我找到了这个例子:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

我试过用HAML重写它:

%div{:class => 'btn-group task_controller'}
  %a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
    %span{:class => 'caret'}
  %ul{:class => 'dropdown-menu'}
    %a{:class => 'close_task', :name => task.name, :href => '#' } Close        

但得到了错误信息:

Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within it.

所以Bootstrap说我把元素放在-tag中,但是HAML不允许这样做.我该如何解决这个问题？

Answer 1

问题在于以下几点:

%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
  %span{:class => 'caret'}

错误消息:content can't be both given on the same line as %a and nested within it指的是与Action"%a"在同一行上的内容,以及%span{:class => 'caret'}"嵌套在其中"的内容.

更一般地说,也许更容易看到,你不能有这样的东西:

%tag Some content here
  And something here as well

解决方法是嵌套在%a:

%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'}
  Action
  %span{:class => 'caret'}

这给出了所需的输出:

<a class='btn-mini dropdown-toggle' data-toggle='dropdown' href='#'>
  Action
  <span class='caret'></span>
</a>

Answer 2

别忘了你的Haml成语!

#div{:class => 'btn-group task_controller'}

相当于:

.btn-group.task_controller

…等等.