html - HAML - ダッシュ付きのパラメーター

Question

この行を変換するにはどうすればよいですか

  <body data-spy="abcd">

HAML 構文に?

これは私にエラーを返します

  %body{:data-spy => "abcd"}

score 37 · Accepted Answer

HTML5 データフィールドの HAML 構文:

%div{ :data => {:id => '555'} }

今、いじり始めましたが、これは「データ」でのみ機能するようです-他のタグは次のようにする必要があります:

%div{ "star-datas" => "hello!" }

あなたの例:

%body{:data => { :spy => 'abcd'}}

score 16 · Accepted Answer

なぜこれを最初に投稿しなかったのかわかりません。<body data-spy="abcd">HAML でタグを記述する「正しい」方法は、を{}完全にスキップしてを使用すること()です。

%body(data-spy="abcd")

属性の値を Ruby として評価していないのであれば、{:key => value}構文をまったく使用するべきではありません。(key="value")静的 HTML 属性に固執します。

元の答え:

HAML には、データ属性を操作するための特定の構文があり、CrazyVipa の回答がうまくまとめています。

完全を期すために、シンボル内でハイフンを使用したい Ruby のここと他の場所の両方で、引用符付きのシンボル構文も使用できることを指摘しておきます。

%body{ :"data-spy" => "abcd" }

一般に、:"text"はと同等で"text".to_sym、パーサーの制限により通常は使用できない文字をシンボルに含めることができます。以下はすべて有効な記号です。

:"symbol with spaces"
:"symbol-with-hyphens"
:"symbol
with
newlines"
:"def my_func(); puts 'ok'; end"

引用符で囲まれた記号は、Ruby 1.9 の新しいハッシュ構文では機能しないことに注意してください。

{ :"key-1" => "value" } # works in 1.8/1.9
{ "key-1": "value" }  # syntax error

score 13 · Accepted Answer

%div{data: {some_hyphenated_id: 'value'}}

HAML はアンダースコアをハイフンに自動的に変換するので、次のようになります。

<div data-some-hyphenated-id="value"></div>

参考：空の属性が必要な場合は、true代わりに使用してください'value'

ハムル:

%div{data: {topbar: true}}
%div{data: {image_carousel: true}}

HTML:

<div data-topbar></div>
<div data-image-carousel></div>

より具体的に言うと、この構文はruby haml gemだけでなく、grunt タスクgrunt-hamlがlanguage設定されている場合にも有効ですruby(上記の ruby haml gem がインストールされている必要があります)。

3 に答える 3