0

この HAML (チェーン化されたヘルパーを使用):

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
  %div{ style: helper_method_3(local5, local6) }
  %span= local7
  %h3{style: "color: black"}= local8

この（反転した）HTMLを生成しています：

<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
<a class="class-value" id="id-value" href="href-value"></a>

しかし、連鎖したメソッドを削除すると、次のようになります。

(...)
- haml_tag :a, helper_method_1(local1, local2) do
(...)

HTML が期待どおりにレンダリングされるよりも:

<a class="class-value" id="id-value" href="href-value">
  <div style="prop1: val:1; prop2: val2;"></div>
  <span>Span Text</span>
  <h3 style="prop3: val3;">H3 Text</h3>
</a>

HAML の何が問題になっていますか?

4

2 に答える 2

2

この行を変更することで解決される問題:

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do

この行に (helper_method_2 に括弧を追加):

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2(local3, local4) ) do

これは不完全な答えです。 自由に拡張・編集してください。

于 2013-01-08T19:12:14.647 に答える
2

HAML は期待どおりの HTML を生成していると思いますが、ブラウザーはそれを HTML 標準に準拠するように書き換えています。

HTML4 が について述べなければならない<a>ことを見てみましょう:

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

およびインライン手段：

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

fontstyle、phrase、special、およびformctrlを見ると、これらのリストのいずれにもor<div>が見つからないため、有効な HTML4 ではありません。<h3><a><div></div></a><a><h3></h3></a>

HTML5 には、何<a>を含めることができるかについて次のように書かれています。

許可されたコンテンツ

透過的 (フレージング コンテンツまたはフロー コンテンツのいずれか)

透明なコンテンツとは:

特定の要素fooのコンテンツ モデルがtransparentとして記述されている 場合、それは次のことを意味します。

  • 要素fooが親要素barの子であり、コンテンツ モデルにフロー要素を含めることが許可されている場合、要素fooのコンテンツにもフロー要素を含めることができます。
  • 要素fooが親要素bazの子であり、その内容モデルがその子要素をフレージング要素のみに制限する場合、要素fooの子要素もフレージング要素のみに制限される

A<div>はフロー要素ですが、フレージング要素ではありません 、また、フレージング要素で<h3>はなくフロー要素です。したがって、HTML5 モードを使用している場合は<a>、フロー要素を含めることができる親要素が必要になります。ただし、これは当てはまらないと思います。HTML5 が使用されていて、<a>の親がフロー要素を許可していない場合、ブラウザーがさらに再構築することを期待します。フレージング要素の制限を超えるには、<div>とをもう 1 レベル上に移動する必要があります。<h3>

お使いのブラウザは、HTML4 をレンダリングしていると考えているか、HTML5 の内容が最新ではないと考えていると思います。

いくつかのオプションがあります:

  1. HAML が生成する HTML を見てください。ブラウザーに尋ねるのではなく、ブラウザーが何かを行う前に生の出力を見てください。これにより、誰が変更を行っているかがわかります。
  2. HTML が HTML5 としてレンダリングされていることを確認してください。
  3. 関連する標準に一致するように HTML を再構築します。時代遅れで熱心すぎるブラウザーをここで補わなければならない場合があります。これには、 以外の何かを使用する必要がある場合が<div>あり<h3>ます<a>。
于 2013-01-08T18:28:30.630 に答える