12

TwitterBootstrapの「ボタンドロップダウン」を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はそれを許可しませんでした。どうすれば問題を解決できますか？

4

3 に答える 3

33

問題は次の行にあります。

%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>
于 2012-04-18T21:25:42.437 に答える
7

Hamlのイディオムを忘れないでください！

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

と同等です：

.btn-group.task_controller

…等。

于 2012-07-26T06:36:01.793 に答える
0

これを試して：

%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

タグ内にコンテンツ行がなくなった場合にのみ、タグ名とコンテンツを同じ行に含めることができます。

于 2012-04-18T21:28:05.257 に答える