HAML – Parameter mit Bindestrich

Lesezeit: 3 Minuten

Wie kann ich diese Zeile konvertieren

  <body data-spy="abcd">

in die HAML-Syntax?

Dieser gibt mir einen Fehler zurück

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

  • Es wirft einen Fehler wegen des Bindestrichs. Schließen Sie einfach die Zeichenfolge mit Bindestrich in Anführungszeichen ein: %body{:'data-spy' => "abcd"}

    – Scott Schupbach

    29. Mai 2018 um 17:04 Uhr


HAML-Syntax für das HTML5-Datenfeld:

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

Jetzt habe ich angefangen, herumzuspielen, und es sieht so aus, als ob dies nur mit “Daten” funktioniert – andere Tags müssen sein:

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

Ihr Beispiel:

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

  • Bei der Verwendung dieser Syntax ist ein Problem aufgetreten, da ich “data-0” benötigte und :0 kein gültiges Symbol ist, also habe ich meine Syntax geändert in :data => {'spy' => 'abcd'}

    – Christos Hrousis

    16. Juni 2014 um 5:29 Uhr

  • Alles kann ein Symbol sein. Wenn es allein nicht gültig ist, schließen Sie es einfach in Anführungszeichen ein und stellen Sie einen Doppelpunkt voran: { :'0' => 'this is a symbol', :'so-is-this' => true }

    – Scott Schupbach

    29. Mai 2018 um 17:02 Uhr

Benutzer-Avatar
Benutzer229044

Ich weiß nicht, warum ich das nicht gleich gepostet habe. Die “richtige” Art, Ihr Tag zu schreiben, <body data-spy="abcd">in HAML, soll das überspringen {} vollständig und verwenden ():

%body(data-spy="abcd")

Wenn Sie die Werte der Attribute nicht als Ruby auswerten, sollten Sie sie nicht verwenden {:key => value} Syntax überhaupt. Bleiben Sie dran (key="value") für statische HTML-Attribute.


Ursprüngliche Antwort:

HAML hat eine spezifische Syntax für die Arbeit mit Datenattributen, die die Antwort von CrazyVipa gut zusammenfasst.

Der Vollständigkeit halber weise ich darauf hin, dass Sie sowohl hier als auch überall sonst in Ruby, wo Sie einen Bindestrich in einem Symbol verwenden möchten, auch die Symbolsyntax in Anführungszeichen verwenden können:

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

Im Algemeinen, :"text" ist äquivalent zu "text".to_sym, sodass Ihr Symbol Zeichen enthalten kann, die aufgrund von Parserbeschränkungen normalerweise nicht möglich sind. Die folgenden sind alle gültigen Symbole:

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

Beachten Sie, dass dies in Anführungszeichen steht nicht mit der neuen Hash-Syntax von Ruby 1.9 arbeiten:

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

  • Vollständigkeit, in der Tat. Vielen Dank!

    – Felixyz

    9. Januar 2013 um 13:46 Uhr

  • Was wäre die neue Hash-Syntax für Ruby1.9+, um itß zu schreiben?

    – Yo Ludke

    4. Dezember 2013 um 12:29 Uhr

  • @YoLudke %div{ data: {id: '555'} }

    – Benutzer229044

    4. Dezember 2013 um 15:01 Uhr

  • Ich meine für das Beispiel mit key-1 -> %div{ data: { :"key-1" => "value" }}in Ruby 1.9+ neu hat Syntax

    – Yo Ludke

    5. Dezember 2013 um 13:28 Uhr

  • @YoLudke Sie können für dieses Symbol keine neue Syntax verwenden. In jeder Version von Ruby würden Sie schreiben :"key-1" => "value"

    – Benutzer229044

    5. Dezember 2013 um 13:35 Uhr


Benutzer-Avatar
jmarceli

Für den HAML-Ruby-Compiler:

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

und HAML wandelt Unterstriche automatisch in Bindestriche um, also bekomme ich:

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

FYI: Wenn Sie ein leeres Attribut benötigen, verwenden Sie es einfach true Anstatt von 'value'

Beispiel:

Haml:

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

HTML:

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

Genauer gesagt gilt diese Syntax für Rubin haml gem sowie Grunzen Aufgabe grunt-haml mit language einstellen ruby (erfordert die Installation des erwähnten Rubinhaml-Edelsteins)

  • Das data-topbar habe ich gesucht. Vielen Dank.

    – Arta

    8. Dezember 2014 um 20:51 Uhr

1092870cookie-checkHAML – Parameter mit Bindestrich

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy