Share
Im zweiten und letzten Teil dieser Miniserie beenden wir diese Einführung mit Abschnitten zur Ausgabe von Ruby-Code, Interpolation, Klartext und zur Anpassung von Slim an Ihre Bedürfnisse. Nach diesem Artikel sollten Sie für eine schlanke Aktion bereit sein.
Sie haben bereits ein bisschen gesehen, wie Sie Ruby in Ihren Vorlagen verwenden können. In diesem Abschnitt erfahren Sie alles, um davon Gebrauch zu machen. Im ersten Artikel haben wir Ruby bereits in unseren Vorlagen verwendet. Ich möchte Sie daran erinnern, was ich meine:
html head title = stylesheet_link_tag 'application', Medien: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Wie Sie sehen können, haben wir in diesem Head-Tag bereits ein paar Methoden von Rails verwendet, um mit Stilen und JavaScript-Elementen umzugehen. Alles was Sie tun müssen, um Ruby-Code auszuführen, müssen Sie ihm ein Gleiches voranstellen = Zeichen. Wenn sich Ihr Code über mehrere Zeilen erstrecken muss, fügen Sie einfach einen umgekehrten Schrägstrich an \ am Ende jeder Zeile und fahren Sie mit der nächsten fort. Wenn Sie die Zeile mit einem Komma beenden ,, dann brauchen Sie den Backslash nicht. Nette kleine Berührung, wenn Sie mich fragen.
Schauen wir uns ein anderes, konkreteres Beispiel an. Das Schreiben von Formularen ist oft ein schmerzhafter Boilerplate-Code, viele Wiederholungen und all diese gefürchteten <%= %> Zeichen in ERB. Dies kann in kürzester Zeit unordentlich werden. Könnte schöner sein, huh?
<%= form_for @agent do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.label :number %> <%= f.text_field :number %> <%= f.label :licence_to_kill %> <%= f.check_box :licence_to_kill %> <%= f.label :gambler %> <%= f.check_box :gambler %> <%= f.label :womanizer %> <%= f.check_box :womanizer %> <%= f.submit %> <% end %>
Eine Menge Zeug zum Schreiben eines Neuen @Agent Objekt, nein? Slim lässt Sie dies viel präziser handhaben. Wir halten einfach das Gleichheitszeichen und beseitigen die meisten anderen Sachen. Tadaa!
= form_for @agent do | f | = f.label: name = f.text_field: name = f.label: number = f.text_field: number = f.label: licence_to_kill = f.check_box: licence_to_kill = f.label: gambler = f.check_box: gambler = f .label: womanizer = f.check_box: womanizer = f.submit
Sie können deutlich erkennen, warum dieses Projekt als Slim bezeichnet wird. So viel überschüssiges Fett ist weg. Sag mir nicht, dass du nicht magst, was du siehst - ich weiß, dass du es grubst! Nur eine = unterschreiben und Sie können Ihr Markup mit Ruby-Code füllen - in diesem Fall natürlich von Rails. Wenn Sie es mit dem auf der letzten Seite gerenderten HTML-Code vergleichen, ist es kaum zu übersehen, wie kompakt Slim wirklich ist.
Erinnern Sie sich an die ursprüngliche Frage, zu der sich das Slim-Kernteam richtet: "Was ist die Mindestanforderung, damit dies funktioniert?" Wenn Sie sich die endgültige HTML-Ausgabe ansehen, kann ich sagen, dass Slim diese Frage ziemlich erfolgreich beantwortet hat - keine Beschwerden An meinem Ende. Ich möchte noch ein paar kleine Beispiele hinzufügen, damit Sie sich besser an das Aussehen von Slim gewöhnen können.
Dieser ERB-Ausschnitt…
<%= render "shared/agents", collection: @agents %>
… Wird dies in Slim:
= "shared / agents" rendern, Sammlung: @agents
Agenten
h2 - Agenten ul - @ agents.each do | agent | li.agent div | Name: = agent.name div | Anzahl: = agent.number div | Lizenz zum Töten: = agent.licence_to_kill
Sie könnten dies auch durch Interpolation strenger schreiben. Sie wollen aber nicht zu verrückt werden. Das würde dann so aussehen:
h2 - Agenten ul - @ agents.each do | agent | li.agent div Name: # agent.name div Nummer: # agent.number div Zu tötende Lizenz: # agent.licence_to_kill
Ich habe das schon kurz erwähnt, aber da es sich um eine Form der Ausgabe von Ruby-Code handelt, gehört es auch zu diesem Abschnitt. Natürlich können Sie auch die Standardtextinterpolation von Ruby in Ihren Slim-Vorlagen verwenden.
h2 Willkommen, Mr. # misix_agent.surname! Ich erwarte, dass du stirbst! h2 Willkommen, Mr. \ # misix_agent.surname! Ich erwarte, dass du stirbst!
Herzlich Willkommen, Herr Bond! Ich erwarte, dass du stirbst!
Willkommen, Mr. \ # misix_agent.surname! Ich erwarte, dass du stirbst!
Wie oben zu sehen, ein einfacher führender Backslash \ entgeht der Interpolation.
Noch eine für die Straße. Angenommen, Sie möchten in Ihrer Ansicht ein paar Bedingungen verwenden. Ähnlich wie bei Haml geben Sie Ruby-Code an, der nicht durch einen einfachen Bindestrich auf die Seite ausgegeben werden soll -. Sie haben dies in dem obigen Beispiel gesehen, in dem wir das zur Wiederholung verwendet haben @agents ohne diesen bestimmten Teil des Codes anzuzeigen.
Obwohl Sie versuchen sollten, möglichst alle möglichen Bedingungen in Ihren Ansichten zu meiden und bessere OOP-Lösungen für solche Fälle zu finden - was für eine andere Zeit eine Geschichte ist -, würden sie so aussehen:
- if current_user.role == "admin" p # admintxt | Willkommen zurück, mein Meister! = link_to "Profil bearbeiten", edit_user_path (: current) = link_to "Logout", logout_path - elsif current_user = link_to "Edit Profile", edit_user_path (: current) = link_to "Logout", logout_path - else = link_to "Register", new_user_path = link_to "Login", login_path
<% if current_user.role == "admin" %>Willkommen zurück, mein Meister!
<%= link_to "Edit Profile", edit_user_path(:current) %> <%= link_to "Logout", logout_path %> <% elsif current_user %> <%= link_to "Edit Profile", edit_user_path(:current) %> <%= link_to "Logout", logout_path %> <% else %> <%= link_to "Register", new_user_path %> <%= link_to "Login", login_path %> <% end %>
Wenn Sie Code ohne HTML-Escape-Code ausgeben möchten, verwenden Sie einfach zwei Gleichheitszeichen ==. Das ist es!
Bevor wir fortfahren, sollte ich mir auf jeden Fall die Zeit nehmen, dies zu erwähnen: Wie Sie hoffentlich wissen, ist jede Menge View-Code - in unserem Kontext auch Tonnen von Ruby-Code genannt - ein schwerer Geruch und sollte jederzeit minimiert werden. Nur weil Slim es vielleicht noch verlockender macht, Ihre Vorlagen mit Tonnen von Logik zu verputzen, heißt das nicht, dass Sie dies tun sollten. Übungszwang in dieser Abteilung! Auf der anderen Seite macht Slim es richtig elegant, Ruby dort einzuspritzen, wo es nötig ist.
Wenn Sie HTML in Ihre Slim-Vorlagen schreiben möchten, haben Sie die Möglichkeit, dies zu tun. Ich habe diese Funktion weder verwendet, noch möchte ich sie verwenden, aber in einer Übergangsphase könnte dies für Neuankömmlinge hilfreich sein. Lass uns einen schnellen Blick darauf werfen.
doctype html head title = full_title (yield (: title)) = stylesheet_link_tag 'application', Medien: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags header.navbar .logo = link_to "beispiel app", 'root_path', id: "logo" .Haupt = Ertrag
Wenn Slim auf die linke Winkelhalterung trifft <, es weiß, dass Sie etwas HTML mischen möchten.
Der Pfeifencharakter | signalisiert Slim, dass Sie ein Klartextwort für Wort haben möchten und kopiert nur die Zeile. Dadurch können Sie jegliche Art der Verarbeitung vermeiden. In der Dokumentation heißt es, wenn Sie wörtlichen Text über mehrere Zeilen schreiben möchten, müssen Sie den Text bei jedem Zeilenumbruch einrücken.
Körper p | Slim ist meine neue beste Freundin. Slim ist meine neue beste Freundin.
Slim ist meine neue beste Freundin. Slim ist meine neue beste Freundin.
Wenn Sie den Text in dieselbe Zeile wie das Pipe-Zeichen setzen, können Sie den linken Rand hinter der Pipe plus ein Leerzeichen setzen. Aus Neugier habe ich ein bisschen herumgespielt und die folgenden Ergebnisse gefunden. Nur die letzte Beispielvariante weist einen kleinen offensichtlichen Schluckauf auf, von dem Sie wissen sollten, dass er das erste Wort des Satzes verschluckt.
Körper p | Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter… p | Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter… p Diese Zeile befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter… p Diese Zeile befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter… p Diese Zeile befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Wie die Ausgabe in Ihrem HTML-Markup dargestellt wird, unterscheidet sich ein wenig.
Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Linie ist am linken Rand. Zeile wird ein Leerzeichen davor haben. Zeile hat zwei Leerzeichen davor. bald…
Natürlich müssen Sie Ihren Code gelegentlich auskommentieren. Vergessen Sie jedoch nicht, dass zu viele Kommentare auch ein Geruch sind. Versuchen Sie, es auf ein absolutes Minimum zu beschränken!
Ein Schrägstrich / Alles, was Sie brauchen, um Code auszukommentieren.
Körper / p | Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Boom! Und jetzt ist dieser Absatz von der Seite verschwunden. Dieser Kommentar hinterlässt keine Spuren im endgültigen HTML-Markup. Sie müssen es nur auf die übergeordnete Auswahl anwenden und alle untergeordneten Elemente werden ebenfalls auskommentiert. So sind auch Kommentare schlank und minimal.
Wenn Sie dagegen einen HTML-Kommentar wünschen Wenn dies in der endgültigen Ausgabe angezeigt wird, müssen Sie nur ein Ausrufezeichen hinzufügen ! nach dem Schrägstrich.
Körper /! p | Diese Linie befindet sich am linken Rand. Vor dieser Zeile steht ein Leerzeichen. Vor dieser Zeile stehen zwei Leerzeichen. Und so weiter…
Ordentlich!
Wir haben schon immer Abkürzungen verwendet. Wenn Sie einen Punkt eingeben . oder ein Hash-Symbol # Sie sagen Slim, dass Sie vordefinierte Verknüpfungen für Klassen und IDs verwenden möchten. Das ist sicherlich ein sehr schöner Standard, aber was können Sie tun, um das zu erweitern und Ihre eigenen kleinen Snippety-Snippets zu erstellen? Wir können dies für Tags und Attribute gleichermaßen tun. Herzlich willkommen bei Slim!!
In Rails müssen wir lediglich einen Initialisierer mit dem folgenden Muster einrichten:
Slim :: Engine.set_options-Verknüpfung: 'c' => Tag: 'container', '#' => attr: 'id', '.' => attr: 'class'
In Sinatra-Apps fügen Sie einfach dieselbe Konfiguration an einer beliebigen Stelle unterhalb der Zeile ein, an der Sie sich befinden erfordern "schlank".
Accentsconagua
erfordern 'sinatra' erfordern 'slim' Slim :: Engine.set_options-Verknüpfung: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html head titel Slim Templates body h1 Bosse Level Templates With SlimSie können Optionen für die Slim :: Engine festlegen, indem Sie einen Hash mit der gewünschten Verknüpfung angeben. Im obigen Beispiel haben wir Slim zur Verwendung angewiesen c als Abkürzung für a Container Etikett. Sie würden es so in Ihren Slim-Dateien verwenden:
c.content Jetzt haben Sie ein Container-Tag mit einer .content-Klasse.
Und das gerenderte HTML würde natürlich so aussehen:
Jetzt haben Sie ein Container-Tag mit einer .content-Klasse.
Ziemlich nett, oder? Aber du hast nicht gedacht, dass hier die Musik aufhört, oder? Wir können noch weiter gehen. Lassen Sie mich Ihnen ein Beispiel geben, das etwas ausführlicher ist:
Slim :: Engine.set_options-Verknüpfung: '#' => attr: 'id', '.' => attr: 'class', 'c' => tag: 'container', '&' => tag: 'input', attr: 'type', '@' => attr: 'role', '^' => attr:% w (Datenrollenrolle)
In diesem Beispiel habe ich nicht nur benutzerdefinierte Tags erstellt, sondern auch nützliche benutzerdefinierte Attribute bereitgestellt. Lassen Sie uns dies Schritt für Schritt analysieren. Übrigens, ich habe den Optionshash über mehrere Zeilen gebrochen, um ihn lesbar zu halten und um zu vermeiden, dass eine lange Codezeile entsteht, auf die niemand gerne stößt. Liest viel schöner, denkst du nicht?
Über das kaufmännische Symbol &, Wir können jetzt ein Eingabe-Tag erstellen und müssen nur einen Typ eingeben, der unmittelbar auf das kaufmännische Und folgt. Wir können jedes Symbol verwenden, das sinnvoll ist. Es ist nicht nötig, dieselbe zu verwenden, die ich auch gemacht habe. Seien Sie jedoch vorsichtig und versuchen Sie, in dieser Abteilung kompromisslose Entscheidungen zu treffen.
& text name = "user" & password name = "pw" & abschicken
Wenn Sie mit Ihren benutzerdefinierten Verknüpfungen Änderungen an dieser Initialisierung vornehmen, sollten Sie nicht vergessen, Ihren lokalen Server neu zu starten. Andernfalls werden Ihre Änderungen während der Vorverarbeitung nicht berücksichtigt.
Als nächstes brauche ich eine Rolle Attribut, ich kann es jetzt einfach mit einem voranstellen @ Symbol.
.person @ admin Daniel Mendler
Daniel Mendler
Refresher: Das Rollenattribut ist ein semantischer Ansatz, um die Rolle des fraglichen Elements zu beschreiben, falls Sie den Zweck des Elements bestimmen müssen.
Sehen Sie, über den Punkt bekommen wir eine class = "person" Klasse und die @Administrator gab uns eine role = "admin". Sehr praktisch, aber wir können diesen kleinen Schritt noch weiter gehen und ein Array verwenden, um mehrere Attribute anzugeben, die über eine einzige Verknüpfung erstellt werden sollen.
.schlauer Hacker CrackDoctor
CrackDoctor
Weil wir eine Reihe von Attributen für unser zugeordnet haben ^ Abkürzung erstellt Slim Datenrolle und Rolle Attribute gleichzeitig über ein einzelnes Symbol. Das kann sehr nützlich sein. Stellen Sie sich vor, Sie möchten ein Element ähnlich dem folgenden ausgeben und können dies mit einer Abkürzung und etwas Ruby-Code übersichtlich machen.
All dies von Hand zu schreiben, scheint nicht die beste Verwendung Ihrer Zeit zu sein - wir haben Code, um diese Arbeit für uns zu erledigen. Nun, da haben Sie es, das ist alles, was Sie wissen müssen, um einen eigenen Satz von tollen Abkürzungen zu erstellen - oder um ein großes Durcheinander zu schaffen, wenn Sie keine Einschränkung üben. Ich würde empfehlen, nicht über Bord zu gehen - insbesondere sollten Sie versuchen, Abkürzungen zu definieren, die Symbole verwenden, mit denen Slim bereits verbunden ist.
Refresher: Die Datenattribute werden verwendet, um einige private Daten auf Ihrer Seite oder Anwendung zu haben. Dinge, mit denen Sie beispielsweise Inhalte filtern können. Sie sind benutzerdefinierte Attribute, die für alle HTML-Elemente verwendet werden können. Ihre Verwendung für JavaScript-Zwecke ist eine andere gängige Praxis. Es ist auch sehr praktisch, um Elemente auf einer Seite zu testen, wenn Sie sicherstellen möchten, dass bestimmte Elemente angezeigt werden und Sie vermeiden möchten, dass Designer Ihre Stile durcheinanderbringen.
Bevor Sie gehen, wollte ich Ihnen einen kleinen Einblick in die umfangreichen Konfigurationsoptionen und deren Anwendung geben. Für Rails erstellen Sie eine Umgebungsdatei wie config /virones / development.rb und legen Sie die gewünschten Optionen fest. Sie platzieren Ihre Konfiguration einfach irgendwo in der Rails.application.configure Block.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' '' => '' ',' ‹'=>'› ' EndeIn dieser Konfiguration habe ich sichergestellt, dass das Standard-Tag, das erstellt wird, wenn ein Tag-Name weggelassen wird, ein ist tag-nicht a div tag, was die Standardeinstellung ist. Außerdem habe ich die Tabsize angepasst, um zwei Leerzeichen zu verwenden, und schließlich zwei weitere Trennzeichen für das Umbrechen von Attributen von Tags hinzugefügt. Jetzt kann ich verwenden ‹› und "" auch dafür. Nicht besonders nützlich, aber gut für Demonstrationszwecke.
Im folgenden Beispiel können Sie sehen, dass alle Trennzeichen für Attribut-Wrapper dieselbe Ausgabe erzeugen - auch diese .einige klasse oder # einige-id schafft Tags standardmäßig.
body #zeroth a href = "http://slim-lang.com" title = "Homepage" Gehe zur Startseite. zuerst a [href = "http://slim-lang.com" title = "Home page "] Gehe zur Startseite .second a (href =" http://slim-lang.com "title =" Home page ") Gehe zur Startseite .third a‹ href = "http: // slim-lang. com "title =" Home page "› Gehe zur Startseite. viertens "href =" http://slim-lang.com "title =" Home page "" Gehe zur Startseite
Springe zur Startseite Springe zur Homepage Springe zur Homepage Springe zur Homepage Springe zur Startseite
Alternativ können Sie dieses Zeug auch einstellen config / initializers / slim.rb wie ich Ihnen im Abschnitt über benutzerdefinierte Verknüpfungen gezeigt habe.
Für Sinatra ist es derselbe Bohrer, der auch im Abschnitt mit den Kurzbefehlen beschrieben wurde. Stellen Sie Ihre Optionen einfach irgendwo unterhalb Ihrer ein erfordern "schlank" Aussage und du bist gut zu gehen.
Sehen Sie sich die Dokumentation unter "Verfügbare Optionen" an, um mehr darüber zu erfahren, was für die Konfiguration verfügbar ist. Slim bietet Ihnen viele Optionen zum Spielen.
Das ist es im Grunde. Es gibt ein oder zwei fortgeschrittenere Themen, die Sie bei Bedarf ausgraben sollten, aber ich dachte, sie sind meistens weder für Anfänger geeignet, noch werden sie täglich verwendet. Ich wollte die Dinge einfach halten und Ihnen alles zeigen, was Sie brauchen, um schnell zu dieser fantastischen, fantastischen Template-Engine zu wechseln. Viel Spaß und ich hoffe, dass Slim jetzt eines Ihrer Lieblingsspielzeuge ist!
