web-dev-qa-db-fra.com

Comment faire des attributs de données avec du haml et des rails?

Je peux avoir

%a{href: '#', data_toggle_description_length: 'toggle_me_ajax'}

qu'il me donne souligne pas des tirets, c'est-à-dire.

<a href="#" data_toggle_description_length="toggle_me_ajax"></a>

Cependant, je veux avoir HTML5 data- attributs, c'est-à-dire.

<a href="#" data-toggle-description-length="toggle_me_ajax"></a>

mais quand j'essaie de remplacer les traits de soulignement par des tirets, c'est-à-dire.

%a{href: '#', data-toggle-description-length: 'toggle_me_ajax'}

Je reçois des erreurs de syntaxe:

/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected tLABEL
...data-toggle-description-length: 'toggle_me_ajax')}>\n    tog...
...                               ^
/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected ')', expecting '}'
...ption-length: 'toggle_me_ajax')}>\n    toggleMeAjax\n  </a>\...
...                               ^
/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: unknown regexp options - pa
/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $undefined
... toggleMeAjax\n  </a>\n</span>\n", -1, false);::Haml::Util.h...
...                               ^
/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: unterminated string meets end of file
/home/durrantm/Dropnot/webs/Rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $end, expecting '}'
ruby-on-railsruby-on-rails-3hamlcustom-data-attributehtml5-data
27
Michael Durrant

Essaye ça:

%a{"data-toggle-description-length" => "toggle_me_ajax", href: "#"}

[~ # ~] ou [~ # ~] 

%a{href: "#", :data => {:toggle_description_length => "toggle_me_ajax"}}

Pour plus de détails, reportez-vous à ici

Vous pouvez également utiliser convertisseur html2haml disponible en ligne

MODIFIER:

Comme mentionné dans les commentaires, il existe quelques syntaxes supplémentaires qui fonctionneraient

 %a{href: "#", { "data-toggle-description-length": "toggle_me_ajax" }}

OR

%a{href: "#", { :"data-toggle-description-length" => "toggle_me_ajax" }}

Je préférerais quand même les deux premiers car je pense que les derniers ont l'air moche et un peu en désordre.

57
Mandeep

Il n'y a vraiment pas besoin d'utiliser { ... } style en haml. Les attributs de style HTML sont un moyen plus flexible et naturel pour la génération html.

%a(href="#" data-toggle="target") my link

Aucune virgule, aucune fusée de hachage, etc. n'est requise. Vous pouvez également interpoler très facilement ou affecter directement des variables sans changer de style.

par exemple.

%a(href=link data-toggle="#{id}-toggle")

Où link et id sont des variables de la portée actuellement liée.

Notamment, vous pouvez également inclure de manière transparente des attributs de xmlns, la génération svg utilise de nombreux préfixes d'espace de noms, par exemple:

%link(xlink:type="simple" xlink:href=link)

Il n'y a aucune raison impérieuse d'utiliser un autre style.

7
ocodo