Подтвердить что ты не робот

HAML - параметр с тире

Как преобразовать эту строку

  <body data-spy="abcd">

для синтаксиса HAML?

Это возвращает мне ошибку

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

Ответ 1

Синтаксис HAML для поля данных HTML5:

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

Теперь я начал возиться, и похоже, что это работает только с "данными" - другие теги должны быть:

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

Ваш пример:

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

Ответ 2

Я не знаю, почему я не опубликовал это в первую очередь. "Правильный" способ записи вашего тега <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

Ответ 3

Для компилятора ruby ​​для HAML:

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

и HAML автоматически преобразует символы подчеркивания в дефисы, поэтому я получаю:

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

FYI: если вам нужен пустой атрибут, просто используйте 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, а также задачи grunt grunt-haml с language, установленным на ruby (требуется упомянутый рубин haml gem)