Share
In het tweede en laatste deel van deze minireeks voltooien we deze inleiding met secties over het uitvoeren van Ruby-code, interpolatie, platte tekst en het aanpassen van Slim aan uw behoeften. Na dat artikel zou je klaar moeten zijn voor wat Slim actie.
U hebt al een beetje gezien hoe u Ruby in uw sjablonen kunt gebruiken. Dit gedeelte biedt u alles wat u nodig hebt om hiervan gebruik te maken. In het eerste artikel hebben we Ruby al in onze sjablonen gebruikt. Laat me je eraan herinneren wat ik bedoel:
html head title = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Zoals je kunt zien, hebben we binnen deze head-tag al een aantal methoden van Rails gebruikt om met stijlen en JavaScript-dingen om te gaan - niets belangrijks. Het enige dat u hoeft te doen om de Ruby-code uit te voeren, is om het met een gelijk aantal te vullen = teken. Als uw code over meerdere regels moet worden verspreid, voegt u gewoon een backslash toe \ aan het einde van elke regel en ga door naar de volgende regel. Moet u de regel in een komma beëindigen ,, dan heb je de backslash niet nodig. Leuke kleine toets als je het mij vraagt.
Laten we eens naar een ander, concreter exemplaar kijken. Het schrijven van vormen is vaak een pijn: veel code, veel herhalingen en al die gevreesde <%= %> tekenen in ERB. Dit kan in een mum van tijd rommelig worden. Zou aardiger kunnen zijn, he?
<%= 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 %>
Veel dingen om te schrijven voor het maken van een nieuwe @middel object, niet? Slim laat je dit veel bondiger af. We houden gewoon het gelijkteken en verwijderen de meeste andere dingen. tadaa!
= form_voor @agent do | f | = f.label: naam = f.text_field: naam = f.label: nummer = f.text_field: nummer = 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.geven
Je kunt duidelijk zien waarom dit project Slim heet. Er is zoveel overtollig vet verdwenen. Vertel me niet dat je het niet leuk vindt wat je ziet - ik weet dat je het aan het graven bent! Gewoon een = teken en u kunt uw markup vullen met Ruby-code, in dit geval natuurlijk van Rails. En als je het vergelijkt met de HTML die op de laatste pagina wordt weergegeven, is het moeilijk te negeren hoe compact Slim werkelijk is.
Onthoud de eerste vraag waar het Slim-kernteam zich door laat leiden: "Wat is het minimum dat nodig is om dit te laten werken?" Als je naar de uiteindelijke HTML-output kijkt, denk ik dat het redelijk is om te zeggen dat Slim die vraag met succes heeft beantwoord-geen klachten op mijn einde. Ik wil een paar kleinere voorbeelden toevoegen om je meer gelegenheid te geven om te wennen aan hoe dit er in Slim uitziet.
Dit ERB-fragment ...
<%= render "shared/agents", collection: @agents %>
... wordt dit in Slim:
= render "shared / agents", verzameling: @agents
agenten
h2 Agents ul - @ agents.each do | agent | li.agent div | Naam: = agent.name div | Number: = agent.number div | Licentie om te doden: = agent.licence_to_kill
Je zou dit ook op een meer gestroomlijnde manier kunnen schrijven via interpolatie. Daar wil je echter niet te gek van worden. Dit ziet er dan als volgt uit:
h2 Agents ul - @ agents.each do | agent | li.agent div Naam: # agent.name div Nummer: # agent.number div Licentie om te doden: # agent.licence_to_kill
Ik heb dit eerder kort genoemd, maar omdat het een vorm van het uitvoeren van Ruby-code is, hoort het ook bij deze sectie. U kunt natuurlijk ook standaard tekstinterpolatie van Ruby gebruiken in uw Slim-sjablonen.
h2 Welkom Mr. # misix_agent.sigree! Ik verwacht dat je sterft! h2 Welkom Mr. \ # misix_agent.sigree! Ik verwacht dat je sterft!
Welkom Mr. Bond! Ik verwacht dat je sterft!
Welkom Mr. \ # misix_agent.sigree! Ik verwacht dat je sterft!
Zoals hierboven te zien, een eenvoudige voorwaartse backslash \ ontsnapt aan de interpolatie.
Nog een voor de weg. Stel dat u een aantal conditionals in uw weergave wilt gebruiken. Net als bij Haml, duid je Ruby-code aan die niet door een simpel streepje op de pagina moet worden uitgevoerd -. U hebt dit in het bovenstaande voorbeeld gezien waar we dit gebruikten om opnieuw te itereren @agents zonder dat specifieke deel van de code weer te geven.
Hoewel je waar mogelijk probeert weg te blijven van allerlei conditionals in je gezichtsveld en te proberen betere OOP-oplossingen te vinden voor dergelijke gevallen, wat een verhaal is voor een andere keer, zien ze er ongeveer zo uit:
- als current_user.role == "admin" p # admintxt | Welkom terug mijn meester! = link_naar "Bewerk profiel", edit_user_path (: huidige) = link_naar "Uitloggen", logout_path - elsif current_user = link_to "Bewerk profiel", edit_user_path (: current) = link_to "Logout", logout_path - else = link_to "Register", new_user_path = link_to "Inloggen", login_path
<% if current_user.role == "admin" %>Welkom terug bij mijn meester!
<%= 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 %>
Als u code wilt uitvoeren zonder dat HTML op zijn plaats is, kunt u gewoon twee gelijktekens gebruiken ==. Dat is het!
Voordat we verdergaan, zou ik zeker de tijd moeten nemen om dit te noemen: zoals je hopelijk weet, is een heleboel view-code - oftewel tonnen Ruby-code in onze context - een ernstige geur en moet deze te allen tijde worden geminimaliseerd. Alleen omdat Slim het misschien nog aantrekkelijker maakt om je sjablonen met tonnen logica te pleisteren, wil nog niet zeggen dat je dat zou moeten doen. Oefen beperkingen op die afdeling! Aan de andere kant gedaan, Slim maakt het echt elegant om Ruby te injecteren waar nodig.
Als u de behoefte voelt om HTML te schrijven in uw Slim-sjablonen, heeft u de optie om dit te doen. Ik heb die functie niet gebruikt en zou het ook niet willen gebruiken, maar misschien kan dit tijdens een overgangsfase nuttig zijn voor nieuwkomers. Laten we snel kijken.
doctype html head title = full_title (yield (: title)) = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags header.navbar .logo = link_to "voorbeeldapp", 'root_path', id: "logo" .hoofd = opbrengst
Wanneer Slim de linker hoeksteun aantreft <, het weet dat je wat HTML wilt mixen.
Het pijpkarakter | signalen naar Slim dat je platte tekst wilt hebben, woord voor woord, en de regel gewoon kopieert. In feite kunt u hiermee elke vorm van verwerking vermijden. De documentatie zegt dat als je woordelijke tekst over meerdere regels wilt schrijven, je de tekst bij elke regeleinde moet laten inspringen.
lichaam p | Slim is mijn nieuwe beste vriend. Slim is mijn nieuwe beste vriend.
Slim is mijn nieuwe beste vriend. Slim is mijn nieuwe beste vriend.
Als u de tekst op dezelfde regel plaatst als het pipe-teken, kunt u de linkermarge instellen na de pipe plus één spatie. Uit nieuwsgierigheid heb ik dit een beetje misleid en de volgende resultaten gevonden. Alleen de laatste voorbeeldvariant heeft een kleine voor de hand liggende hapering waar je je bewust van moet zijn - hij slikt het eerste woord van de zin door.
lichaam p | Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. En zo verder ... p | Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. En zo verder ... p Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. En zo verder ... p Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. En zo verder ... p Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Hoe de uitvoer wordt weergegeven in uw HTML-markup, verschilt een beetje.
Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
lijn bevindt zich in de linkermarge. regel heeft een spatie ervoor. regel heeft twee spaties ervoor. spoedig…
Natuurlijk is het nodig om af en toe commentaar te geven op je code. Vergeet echter niet dat teveel reacties ook een geur zijn. Probeer het gewoon tot een absoluut minimum te beperken!
Een voorwaartse schuine streep / is alles wat je nodig hebt om commentaar te geven op elke code.
lichaam / p | Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Boom! En nu is deze alinea verdwenen van de pagina. Deze opmerking laat geen spoor na in de uiteindelijke HTML-opmaak. Je moet het gewoon toepassen op de bovenliggende selector en al zijn kinderen zullen ook worden becommentarieerd. Dus zelfs opmerkingen zijn smal en minimaal.
Als u daarentegen een HTML-opmerking wilt dat wordt weergegeven in de uiteindelijke weergave, u hoeft alleen een uitroepteken toe te voegen ! na de schuine streep.
lichaam /! p | Deze lijn bevindt zich in de linkermarge. Deze regel heeft één spatie ervoor. Deze regel heeft twee spaties ervoor. Enzovoorts…
Netjes!
We hebben altijd al snelkoppelingen gebruikt. Wanneer u een punt typt . of een hash-symbool # u vertelt Slim dat u vooraf gedefinieerde snelkoppelingen voor klassen en id's wilt gebruiken. Dat is zeker een erg goede standaard, maar wat kun je doen om daar verder op in te gaan en je eigen kleine fragmentjes te maken? We kunnen dit zowel voor tags als attributen doen. Welkom bij de ontzagwekkende toestand van Slim!
In Rails hoeven we alleen maar een initializer in te stellen met het volgende patroon:
Slim :: Engine.set_options sneltoets: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class'
In Sinatra-apps voegt u eenvoudig dezelfde configuratie toe, overal onder de lijn waar u zich bevindt vereisen 'slank'.
Accentsconagua
vereisen 'sinatra' vereisen 'slank' Slim :: Engine.set_options sneltoets: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html head title Slim Templates body h1 Boss Level Templates With SlimU kunt opties op de Slim :: Engine instellen door een hash toe te voegen aan de snelkoppeling die u nodig hebt. In het bovenstaande voorbeeld hebben we Slim geïnstrueerd om te gebruiken c als een snelkoppeling voor een houder label. Je zou het zo gebruiken in je Slim-bestanden:
c.content Nu hebt u een containertag met een .content-klasse.
En de gerenderde HTML zou er natuurlijk zo uitzien:
U hebt nu een containertag met een .content-klasse.
Best goed, huh? Maar je dacht niet dat daar de muziek stopt, of wel? We kunnen het verder dan dat. Laat me je een voorbeeld geven dat een beetje meer betrokken is:
Slim :: Engine.set_options sneltoets: '#' => attr: 'id', '.' => attr: 'class', 'c' => tag: 'container', '&' => tag: 'input', attr: 'type', '@' => attr: 'rol', '^' => attr:% w (rol gegevensrol)
In dit voorbeeld heb ik niet alleen aangepaste tags gemaakt, maar ook handige aangepaste kenmerken. Laten we dit stap voor stap ontleden. Trouwens, ik heb de optieshash over meerdere regels gebroken om het leesbaar te houden en om te voorkomen dat er een lange rij code staat waar niemand graag struikelt. Leest veel leukers, vind je niet?
Via het ampersand-symbool &, we kunnen nu een invoertag maken en we moeten het gewoon een type invoeren dat onmiddellijk volgt op de ampersand. We kunnen elk symbool gebruiken dat logisch is om te gebruiken; het is niet nodig dezelfde te gebruiken als ik. Wees echter voorzichtig en probeer compromisloze beslissingen te nemen op die afdeling.
& text name = "user" & password name = "pw" & submit
Wanneer u wijzigingen in deze initialisatie aanbrengt met uw aangepaste snelkoppelingen, moet u niet vergeten om uw lokale server opnieuw te starten. Zonder dat zullen uw wijzigingen niet worden weergegeven tijdens de voorbewerking.
Vervolgens, als ik een nodig heb rol attribuut, ik kan het nu gewoon prefixen met een @ symbool.
.persoon @ admin Daniel Mendler
Daniel Mendler
Opfrissing: het rolkenmerk is een semantische benadering om de rol van het element in kwestie te beschrijven - als u het doel van het element wilt bepalen.
Kijk, via de stip krijgen we een class = "persoon" klasse en de @beheerder gaf ons een role = "admin". Best handig, maar we kunnen nog een stap verder gaan en een array gebruiken om meerdere attributen te specificeren die zouden moeten worden aangemaakt via een enkele snelkoppeling.
.handige ^ hacker CrackDoctor
CrackDoctor
Omdat we een array van kenmerken voor onze hebben gekoppeld ^ snelkoppeling, Slim maakt data-rol en rol attributen tegelijkertijd via een enkel symbool. Dat kan best handig zijn. Stel je voor als je een element wilt uitvoeren dat lijkt op het volgende en het bondig kan doen met een sneltoets en wat Ruby-code.
Dit alles met de hand schrijven lijkt niet het beste gebruik van je tijd te zijn - we hebben code om dat werk voor ons te doen. Nou, daar heb je het, dat is alles wat je moet weten om je eigen set van ontzagwekkende snelkoppelingen te maken - of om een grote puinhoop te creëren als je geen enkele beperking uitoefent. Ik zou aanraden om hier niet overboord mee te gaan - probeer vooral weg te blijven van het definiëren van snelkoppelingen die symbolen gebruiken die Slim al is gekoppeld aan.
Opfrissing: de gegevensattributen worden gebruikt om privégegevens op uw pagina of toepassing te hebben. Dingen die u bijvoorbeeld helpen bij het filteren van inhoud. Het zijn aangepaste kenmerken die kunnen worden gebruikt voor alle HTML-elementen. Gebruik ze voor JavaScript-doeleinden is een andere veel voorkomende praktijk. Het is ook erg handig voor het testen van elementen op een pagina als je zeker wilt zijn dat bepaalde elementen verschijnen en je wilt voorkomen dat ontwerpers knoeien met je stijlen.
Voordat je wegging, wilde ik je een beetje sneak peek laten zien in de uitgebreide configuratie-opties en hoe je ze toepast. Voor Rails zou je een omgevingsbestand maken zoals config / omgevingen / development.rb en specificeer de opties die je nodig hebt. U plaatst uw configuratie eenvoudig ergens in de Rails.application.configure blok.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' "'=>'" ',' <'=>'> ' EindeIn deze configuratie heb ik ervoor gezorgd dat de standaardtag die wordt gemaakt als een labelnaam wordt weggelaten, een is tag-not a div tag, de standaardinstelling. Ook heb ik de tabsize aangepast om twee witruimten te gebruiken en als laatste nog twee scheidingstekens toegevoegd voor de wrappingattributen van tags. Nu kan ik gebruiken <> en "" ook daarvoor. Niet erg nuttig, maar goed voor demonstratiedoeleinden.
In het onderstaande voorbeeld kunt u zien dat alle scheidingstekens voor attribuut wrappers dezelfde uitvoer creëren, ook die .sommige-klasse of # Sommige-id creëert tags per standaard.
body #zeroth a href = "http://slim-lang.com" title = "Startpagina" Ga naar de startpagina .first a [href = "http://slim-lang.com" title = "Startpagina pagina "] Ga naar de startpagina .seconde a (href =" http://slim-lang.com "title =" Startpagina ") Ga naar de startpagina .third aGa naar de startpagina.vier een" href = "http://slim-lang.com" title = "Startpagina" "Ga naar de startpagina
Ga naar de startpagina Ga naar de startpagina Ga naar de startpagina Ga naar de startpagina Ga naar de startpagina
Je kunt dit spul ook instellen config / initialiseerders / slim.rb zoals ik je liet zien in de sectie over aangepaste snelkoppelingen.
Voor Sinatra is het dezelfde oefening als besproken in de sectie met snelkoppelingen. Stel je opties ergens onder je in vereisen 'slank' verklaring en je bent goed om te gaan.
Bekijk de documentatie onder 'Beschikbare opties' voor meer informatie over wat beschikbaar is voor configuratie. Slim geeft je veel opties om mee te spelen.
Dat is het eigenlijk. Er zijn een of twee meer geavanceerde onderwerpen waar je in zou moeten graven als dat nodig zou zijn, maar ik dacht dat ze meestal niet beginnersvriendelijk zijn en ook niet dagelijks intensief worden gebruikt. Ik wilde dingen simpel houden en alles laten zien wat je nodig hebt om snel over te schakelen naar deze geweldige, geweldige templatemachine. Veel plezier en ik hoop dat Slim nu een van je favoriete nieuwe speelgoed is!
