1

私の 'footer_links' スパンが早期に (button_to を削除する前に) 終了するのはなぜですか:

%p
  %br
  %span.footer_links
    = link_to 'Edit', edit_link_path(@link)
    |
    = button_to 'Delete', @link, :confirm => 'Are you sure?', :method => :delete

これを生産しています：

<p>
<br/>
<span class="footer_links">
<a href="/links/354/edit">
<a href="/links/354/edit">
 | 
</span>
</p>
<form method="post" action="/links/354" class="button_to">
<div>
<input name="_method" type="hidden" value="delete"/>
<input data-confirm="Are you sure?" type="submit" value="Delete"/>
<input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
</div>
</form>
4

3 に答える 3

4

「mu が短すぎる」という回答に基づいて、pandspan要素をdiv(または有効な HTML である他の何か)に変更します。

%div
  %br
  .footer_links
    = link_to 'Edit', root_path
    |
    = button_to 'Delete', current_user, :confirm => 'Are you sure?', :method => :delete

Chrome (または Safari または Firefox/Firebug) 開発者ツールの Elements (別名 DOM) ブラウザーから「ソース」を取得したと思います。これは、HAML によってレンダリングされた生のソースを見ることと同じではありません。ブラウザーは (無効な) ソースを解析し、そこから最適な DOM を構築しようとします。DOM を参照すると、開発者コンソールはそれをテキストとしてダンプします。

特にソースが無効な場合、開発者コンソールでのテキスト表現が生のソースと同じになることはめったにありません。レンダリング エラーをデバッグしようとしているときは、何層にも重なったガーゼを凝視しないでください。ブラウザのメニューから「ソースを表示」を選択します。

于 2012-06-01T02:47:04.170 に答える
3

あなたの HAML は実際には次のようなものを生成していると思います。

<p>
  <br/>
  <span class="footer_links">
    <a href="/links/354/edit">...</a>
     | 
    <form method="post" action="/links/354" class="button_to">
      <div>
        <input name="_method" type="hidden" value="delete"/>
        <input data-confirm="Are you sure?" type="submit" value="Delete"/>
        <input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
      </div>
    </form>
  </span>
</p>

しかし、それは有効な HTML ではありません: <div>(または<form>) を<p>. そのため、ブラウザーが HTML を解析しようとすると、それが有効な HTML ではないことに気づき、HTML を修正するために最善を尽くします。<form>最も簡単な修正は、問題のある要素を の外側にプッシュし、途中でand要素<p>を閉じることです。これにより、次のような (有効な HTML) 構造が生成されます。<span><p>

<p>...</p>
<form><div>...</div></form>

そして、それはあなたが見ているものと疑わしいように見えます.

解決策は、有効な HTML を使用することです。おそらく、<div class="p">最も外側の代わりに使用<p>し、CSS を調整して. と同じようにフレージング コンテンツしか含めることができないため、 も置き換える必要があります。div.pp<span><span><p>

于 2012-06-01T01:41:18.187 に答える
0

Totally a guess, but did you mix spaces and tabs in your indentation? It looks like HAML is interpreting the button_to tag as being indented at the same level as the %p tag, so I'm wondering if there's a tab that might be getting interpreted as a space.

The HAML documentation says you can't mix tabs and spaces in your indentation but it doesn't say whether this throws an error or shows up as unexpected behavior.

于 2012-06-01T01:20:55.937 に答える