Share
I den andra och sista delen av denna mini-serie avslutar vi den här introduktionen med avsnitt om utmatning av Ruby-kod, interpolering, vanlig text och hur man anpassar Slim till dina behov. Efter den artikeln bör du vara redo för lite Slim-åtgärder.
Du har redan sett lite om hur du använder Ruby i dina mallar. Detta avsnitt ger dig allt du behöver för att utnyttja detta. I den första artikeln har vi använt Ruby redan i våra mallar. Låt mig påminna dig vad jag menar:
html head title = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Som du kan se, inom den här huvudetiketten, använde vi redan ett par metoder från Rails för att hantera stilar och JavaScript-grejer - inget stort. Allt du behöver göra för att utföra Ruby-kod är prepend det med en jämnare = skylt. Om din kod behöver spridas över flera rader, lägg bara till en backslash \ i slutet av varje linje och fortsätt till nästa. Ska du avsluta raden i ett komma ,, då behöver du inte backslash. Trevlig liten touch om du frågar mig.
Låt oss ta en titt på ett annat, mer konkret exempel. Skrivningsformulär är ofta en smärtsam massa kedjeplattkod, massor av upprepning och alla dessa fruktade <%= %> tecken i ERB. Det kan bli rörigt på nolltid. Kan vara trevligare, va?
<%= 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 %>
Många saker att skriva för att skapa en ny @ombud objekt, nej? Slim kan du hantera detta mycket mer kortfattat. Vi håller bara lika tecken och bli av med de flesta andra saker. Tadaa!
= form_for @agent do | f | = f.label: namn = f.text_field: namn = f.label: nummer = f.text_fält: 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.submit
Du kan tydligt se varför detta projekt heter Slim. Så mycket överskott av fett är borta. Berätta inte för mig att du inte gillar det du ser - jag vet att du gräver det! Bara en = teckna och du kan fylla din markering med Ruby-kod - i det här fallet från Rails, förstås. Och när du jämför det med HTML som gjorts på den sista sidan, är det svårt att ignorera hur compact Slim verkligen är.
Kom ihåg den första frågan som Slim-kärnteamet styrs av: "Vad krävs för att göra detta arbete?" När man tittar på den slutliga HTML-utmatningen, antar jag att det är rättvist att säga att Slim har svarat på den frågan ganska framgångsrikt - inga klagomål på min sida. Jag vill kasta in några fler små exempel för att ge dig mer möjlighet att vänja sig på hur det här ser ut i Slim.
Detta ERB-kod ...
<%= render "shared/agents", collection: @agents %>
... blir detta i Slim:
= gör "delade / agenter", samling: @agents
agenter
h2 Agenter ul - @ agents.each do | agent | li.agent div | Namn: = agent.name div | Nummer: = agent.number div | Licens att döda: = agent.licence_to_kill
Du kan också skriva detta på ett mer strömlinjeformat sätt via interpolering. Du vill inte gå för galen med den där. Det här skulle se ut så här:
h2 Agenter ul - @ agents.each do | agent | li.agent div Namn: # agent.name div Nummer: # agent.number div Licens att döda: # agent.licence_to_kill
Jag nämnde detta innan kort, men eftersom det är en form av utmatning av Ruby-kod hör det till detta avsnitt också. Du kan självklart också använda standard textinterpolering från Ruby i dina Slim-mallar.
h2 Välkommen Herr # misix_agent.surname! Jag förväntar mig att du ska dö! h2 Välkommen Herr \ # misix_agent.surname! Jag förväntar mig att du ska dö!
Välkommen Herr Bond! Jag förväntar mig att du ska dö!
Välkommen Herr \ # misix_agent.surname! Jag förväntar mig att du ska dö!
Som sedd ovan, en enkel ledande backslash \ undviker interpolationen.
En till vägen. Låt oss säga att du vill använda ett par villkor i din uppfattning. På samma sätt som Haml betyder du Ruby-kod som inte ska utföras på sidan med ett enkelt streck -. Du har sett detta i exemplet ovan där vi använde det för att iterera över @agents utan att visa den särskilda delen av koden.
Även om du borde försöka hålla sig borta från alla slags conditionals i dina åsikter där det är möjligt och försöka hitta bättre OOP-lösningar för sådana fall - vilket är en historia för en annan tid - skulle de se ut så här:
- om current_user.role == "admin" p # admintxt | Välkommen tillbaka min mästare! = link_to "Redigera profil", edit_user_path (: current) = link_to "Logga ut", logout_path - elsif current_user = link_to "Redigera profil", edit_user_path (: current) = link_to "Logga ut", logout_path - else = link_to "Registrera", new_user_path = link_to "Login", login_path
<% if current_user.role == "admin" %>Välkommen tillbaka min mästare!
<%= 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 %>
Om du vill skriva ut kod utan att HTML släpps på plats, använd bara två lika tecken ==. Det är allt!
Innan vi går vidare borde jag definitivt ta tid att nämna detta: Som du är medveten om är massor av synkod-aka massor av Ruby-kod i vårt sammanhang - en allvarlig lukt och bör alltid minimeras. Bara för att Slim gör det kanske ännu mer lockande att plåta dina mallar med massor av logik, betyder inte att du borde. Öva begränsningen i den avdelningen! Gjord rätt, å andra sidan, Slim gör det väldigt elegant att injicera Ruby vid behov.
Om du känner att du behöver skriva HTML i dina smarta mallar, har du möjlighet att. Jag har inte använt den funktionen, och jag skulle inte bry mig om att använda den, men kanske under en övergångsfas kan det vara till nytta för nykomlingar. Låt oss ha en super snabb look.
doktyp html head_title = full_title (yield (: title)) = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true = javascript_include_tag " csrf_meta_tags header.navbar .logo = link_to "sample app", "root_path", id: "logo" .huvud = utbyte
När Slim möter vänster vinkelbeslag <, det vet att du vill blanda i vissa HTML.
Rörkaraktären | signalerar till Slim som du vill ha vanligt textord för ord - och kopierar bara linjen. I själva verket låter du dig undvika någon form av bearbetning. Dokumentationen säger att om du vill skriva ordlig text över flera rader måste du skriva in texten med varje radbrytning.
kropp p | Slim är min nya bästa vän. Slim är min nya bästa vän.
Slim är min nya bästa vän. Slim är min nya bästa vän.
Om du lägger texten i samma linje som rörteckenet kan du ställa in vänstermarginalen efter röret plus ett enda utrymme. Av nyfikenhet lurade jag lite av det här och hittade följande resultat. Endast det sista exemplet variationen har en liten uppenbar hicka som du borde vara medveten om - det sväljer det första ordet av meningen.
kropp p | Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare ... p | Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare ... p Den här raden är till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare ... p Den här raden är till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare ... p Den här raden är till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
Hur utmatningen görs i HTML-uppställningen skiljer sig lite.
Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
linjen ligger till vänster marginal. linjen kommer att ha ett utrymme framför den. linjen kommer att ha två utrymmen framför den. så vidare…
Naturligtvis är det nödvändigt att kommentera din kod varje gång i taget. Glöm inte, att för många kommentarer är en lukt också. Försök bara hålla det till ett absolut minimum!
Ett snedstreck framåt / är allt du behöver för att kommentera någon kod.
kropp / p | Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
bom! Och nu är denna punkt borta från sidan. Den här kommentaren lämnar inget spår i den slutliga HTML-uppteckningen. Du behöver bara ange den till förälderväljaren och alla dess barn kommer också att kommenteras. Så, även kommentarer är smala och minimala.
Om du däremot vill ha lite HTML-kommentar som dyker upp i den slutliga produktionen som gjorts, behöver du bara lägga till ett utropstecken ! efter snedstrecket.
kropp /! p | Denna rad ligger till vänster. Denna linje kommer att ha ett utrymme framför den. Denna rad har två utrymmen framför den. Och så vidare…
Propert!
Vi har använt genvägar hela tiden. När du skriver en punkt . eller en hash-symbol # du säger Slim att du vill använda fördefinierade genvägar för klasser och ids. Det är verkligen en väldigt trevlig standard, men vad kan du göra för att expandera på det och skapa dina egna små snippety snippets? Vi kan göra det för både taggar och attribut. Välkommen till Slimens awesomeness!
I Rails behöver vi bara konfigurera en initialiserare med följande mönster:
Slim :: Motor.set_options genväg: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class'
I Sinatra apps lägger du helt enkelt samma konfiguration någonstans under linjen där du kräver "smal".
Accentsconagua
kräver "sinatra" kräver "smal" Slim :: Engine.set_options genväg: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html huvudtitel Slank mallar kropp h1 Boss Level Mallar med SlimDu kan ställa in alternativ på Slim :: Engine genom att tillhandahålla en hash med genvägen du behöver. I exemplet ovan instruerade vi Slim att använda c som en genväg för en behållare märka. Du skulle använda det så här i dina smarta filer:
c.content Nu har du en containerkod med en .content-klass.
Och den gjorda HTML skulle se ut så här, förstås:
Nu har du en containerkod med en .content-klass.
Ganska trevligt, va? Men du trodde inte det var där musiken stannar, eller hur? Vi kan ta det längre än det. Låt mig ge dig ett exempel som är lite mer involverat:
Slim :: Motor.set_options-genväg: '#' => attr: 'id', '.' => attr: 'class', 'c' => tag: 'behållare', '&' => tagg: 'inmatning', attr: 'typ', '@' => attr: 'roll', '^' => attr:% w (roll för roll av uppgifter)
I det här exemplet har jag inte bara skapat anpassade taggar, utan också gjort det möjligt att ha praktiska anpassade attribut. Låt oss dissekera detta steg för steg. Förresten bröt jag alternativhacken över flera linjer för att hålla den läsbar och för att undvika att ha en lång rad kod som ingen gillar att snubbla på. Läser mycket trevligare, tror du inte?
Via ampersand symbolen &, vi kan nu skapa en inmatningskod, och vi behöver bara mata den en typ - som omedelbart följer ampersand. Vi kan använda någon symbol som är meningsfull att använda; Det finns ingen anledning att använda samma som jag gjorde. Var försiktig och försök att göra kompromisslös beslut i den avdelningen.
& textnamn = "användare" & lösenord namn = "pw" & skicka in
När du ändrar denna initialiserare med dina egna genvägar, bör du inte glömma att starta om din lokala server. Utan det kommer dina ändringar inte att återspeglas under förbehandlingen.
Nästa, om jag behöver en roll attribut, jag kan nu bara prefixa det med en @ symbol.
.person @ admin Daniel Mendler
Daniel Mendler
Uppdatering: Rollattributet är ett semantiskt tillvägagångssätt för att beskriva elementets roll i fråga - om du behöver bestämma syftet med elementet.
Se, via pricken får vi en class = "person" klass och @administration gav oss en role = "admin". Ganska bra dandy, men vi kan ta det här ett litet steg längre och använda en array för att ange flera attribut som ska skapas via en enda genväg.
.nifty ^ hacker CrackDoctor
CrackDoctor
Eftersom vi associerade en rad attribut för vår ^ genväg, skapar Slim data roll och roll attribut samtidigt genom en enda symbol. Det kan komma ganska praktiskt. Tänk om du vill skriva ut ett element som liknar följande och kan göra det kortfattat med en genväg och en del Ruby-kod.
Att skriva allt detta för hand verkar inte vara den bästa användningen av din tid - vi har kod för att göra det jobbet för oss. Tja, där har du det, det är allt du behöver veta för att skapa din egen uppsättning fantastiska genvägar - eller för att skapa en stor röra när du inte tränar lite av tvång. Jag skulle rekommendera att inte gå överbord med detta-speciellt försöka hålla sig borta från att definiera genvägar som använder symboler som Slim är redan kopplad till.
Uppdatering: Datatributen används för att ha vissa privata data på din sida eller applikation. Stuff som hjälper dig att filtrera innehåll, till exempel. De är anpassade attribut som kan användas på alla HTML-element. Att använda dem för JavaScript är en annan vanlig praxis. Det är också väldigt praktiskt för testelement på en sida om du vill se till att vissa element dyker upp och du vill undvika att designers röra med dina stilar.
Innan du lämnade, ville jag visa dig en liten smekning i de stora konfigurationsalternativen och hur du tillämpar dem. För Rails, skulle du skapa en miljöfil som config / miljöer / development.rb och ange vilka alternativ du behöver. Du ställer helt enkelt din konfiguration på plats i Rails.application.configure blockera.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' '' => '"', '<' => '>' SlutetI den här konfigurationen såg jag till att standard taggen som skapas om ett tagnamn utelämnas är a tag-inte a div tagg, vilket är standardinställningen. Jag justerade också tabsize för att använda två vita mellanslag och slutligen tillfogade ytterligare två avgränsare för att förpacka attribut av taggar. Nu kan jag använda <> och "" också för det. Inte fruktansvärt användbart men bra för demonstrationsändamål.
I exemplet nedan kan du se att alla avgränsare för attributet wrappers skapar samma utgång - även det .något-klass eller # Något-id skapar taggar per standard.
body #zeroth a href = "http://slim-lang.com" title = "Hemsida" Gå till startsidan. först en [href = "http://slim-lang.com" title = "Hem sida "] Gå till startsidan. andra en (href =" http://slim-lang.com "title =" Hemsida ") Gå till startsidan .third aGå till hemsidan. fourth a" href = "http://slim-lang.com" title = "Hemsida" "Gå till startsidan
Gå till startsidan Gå till hemsidan Gå till startsidan Gå till hemsidan Gå till startsidan
Alternativt kan du också ställa in dessa saker config / initializers / slim.rb som jag visade dig i avsnittet om anpassade genvägar.
För Sinatra är det samma borr som diskuteras i genvägarna också. Ange bara dina alternativ någonstans under din kräver "smal" uttalande och du är bra att gå.
Ta en titt på dokumentationen under "Tillgängliga alternativ" för att läsa mer om vad som är tillgängligt för konfiguration. Slim ger dig många alternativ att leka med.
Det är i princip det. Det finns ett eller två mer avancerade ämnen som du borde gräva om det behövs, men jag trodde att de för det mesta inte är nybörjarevänliga eller kraftigt använda dagligen. Jag ville hålla saker enkelt och visa dig allt du behöver för att snabbt byta till denna fantastiska, fantastiska templerande motor. Ha det roligt, och jag hoppas Slim är nu en av dina favorit nya leksaker!
