31

我怎样才能转换这条线

  <body data-spy="abcd">

到 HAML 语法?

这个给我一个错误

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

3 回答 3

37

HTML5 数据字段的 HAML 语法:

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

现在,我开始搞砸了,看起来这只适用于“数据”——其他标签必须是:

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

你的例子:

%body{:data => { :spy => 'abcd'}}
于 2012-07-16T18:17:35.650 回答
16

我不知道为什么我没有首先发布这个。在HAML中编写标签的“正确”方法<body data-spy="abcd">是完全跳过{}并使用()

%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
于 2012-07-16T18:28:23.513 回答
13

对于 HAML 红宝石编译器:

%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 task grunt -hamllanguage有效ruby(需要安装提到的 ruby​​ haml gem)

于 2014-02-05T23:57:06.107 回答