Question

如何转换此行

  <body data-spy="abcd">

到HAML语法？

这个给我一个错误

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

Answer 1

HTML5数据字段的HAML语法：

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

现在，我开始搞乱，看起来这只适用于“数据” - 其他标签需要：

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

你的例子：

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

Answer 2

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

()

如果您没有将属性值评估为Ruby，则根本不应使用%body(data-spy="abcd")语法。坚持使用{:key => value}来获取静态HTML属性。

原始答案：

HAML有一个特定的语法来处理CrazyVipa's answer很好地总结的数据属性。

为了完整起见，我要指出你也可以在Ruby中使用带引号的符号语法，你想在符号中使用连字符：

(key="value")

通常，%body{ :"data-spy" => "abcd" }相当于:"text"，允许您的符号包含由于解析器限制而通常无法使用的字符。以下是所有有效的符号：

"text".to_sym

请注意，带引号的符号不可以使用Ruby 1.9的新哈希语法：

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

Answer 3

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

和HAML自动将下划线转换为连字符，所以我得到：

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

仅供参考：如果您需要空属性，请使用true代替'value'

Haml的：

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

HTML：

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

更具体地说，此语法对于 ruby haml gem 以及将language设置为ruby的grunt任务 grunt-haml 有效（需要提到安装的ruby haml gem）