Share
În cea de-a doua și ultima parte a acestei serii mini, vom termina această introducere cu secțiuni despre afișarea codului Ruby, interpolare, text simplu și cum să personalizați Slim la nevoile dvs. După acest articol, ar trebui să fii pregătit pentru o acțiune subțire.
Ați văzut deja un pic despre cum să utilizați Ruby în șabloanele dvs. Această secțiune vă oferă tot ce aveți nevoie pentru a utiliza acest lucru. În primul articol, am folosit deja Ruby în șabloanele noastre. Permiteți-mi să vă reamintesc ce vreau să spun:
html head title = stilesheet_link_tag "cerere", media: 'toate', 'data-turbolinks-track' => true = javascript_include_tag 'cerere', 'data-turbolinks-track' => true = csrf_meta_tags
După cum puteți vedea, în interiorul acestei etichete de cap, am folosit deja câteva metode de la Rails pentru a trata stilurile și chestiile JavaScript - nimic major. Tot ceea ce trebuie să faceți pentru a executa codul Ruby este să îl prefixați cu un egal = semn. Dacă codul dvs. trebuie să se răspândească pe mai multe linii, trebuie doar să adăugați o coloană inversă \ la sfârșitul fiecărei linii și continuați să mergeți pe următoarea. Ar trebui să închideți linia într-o virgulă ,, atunci nu aveți nevoie de backslash. O minunată atingere dacă mă întrebi.
Să aruncăm o privire la un alt exemplu mai concret. Formularele de scriere sunt adesea o durere - o mulțime de cod de boilerplate, o mulțime de repetări și toate acestea se temeau <%= %> semne în ERB. Acest lucru poate deveni dezordonat în cel mai scurt timp. Ar putea fi mai frumos, 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 %>
O mulțime de lucruri pentru a scrie pentru a crea un nou @agent obiect, nu? Slim vă permite să vă ocupați de acest lucru mult mai succint. Păstrăm semnul egal și scapăm de cele mai multe alte lucruri. Tadaa!
= form_for @agent do | f | = f.label: nume = f.text_field: nume = f.label: număr = f.text_field: număr = f.label: license_to_kill = f.check_box: license_to_kill = f.label: gambler = f.check_box: gambler = f .label: womanizer = f.check_box: femeie = f.submit
Puteți vedea clar de ce acest proiect se numește Slim. Atât excesul de grăsime a dispărut. Nu-mi spune că nu-ți place ce vezi - știu că o săpești! Doar un = semnați și puteți să vă populați marcajul cu codul Ruby - în acest caz de la Rails, desigur. Și când o comparați cu HTML-ul redat pe pagina finală, este greu să ignorați cât de compact este Slim.
Amintiți-vă de întrebarea inițială că echipa de bază Slim este ghidată de: "Care este minimul necesar pentru a face acest lucru?" Când te uiți la rezultatul final HTML, cred că este corect să spun că Slim a răspuns la întrebarea asta cu succes - fără plângeri la sfârșitul meu. Vreau să arunc câteva exemple mai mici pentru a vă oferi mai multe ocazii să vă obișnuiți cu modul în care acest lucru arată în Slim.
Acest fragment ERB ...
<%= render "shared/agents", collection: @agents %>
... devine acest lucru în Slim:
= render "shared / agents", colecție: @agents
agenţi
h2 Agenți ul - @ agents.each do | agent li.agent div | Nume: = agent.name div | Număr: = agent.number div | Licență pentru a ucide: = agent.licence_to_kill
Ați putea scrie acest lucru într-un mod mult mai raționalizat prin interpolare. Dar nu vrei să fii prea nebun cu asta. Ar arata astfel:
h2 Agenți ul - @ agents.each do | agent li.agent div Nume: # agent.name div Număr: # agent.number div Licență pentru a ucide: # agent.licence_to_kill
Am menționat acest lucru în cele din urmă, dar, deoarece este o formă de ieșire a codului Ruby, aparține și acestei secțiuni. Puteți folosi, de asemenea, interpolarea standard a textului de la Ruby în șabloanele Slim, de asemenea.
h2 Bun venit domnul # misix_agent.surname! Mă aștept să mori! h2 Bun venit domnul \ # misix_agent.surname! Mă aștept să mori!
Bun venit domnului Bond! Mă aștept să mori!
Bine ați venit domnul \ # misix_agent.surname! Mă aștept să mori!
Așa cum am văzut mai sus, o simplă întoarcere de frână \ scapă de interpolare.
Încă unul pentru drum. Să presupunem că doriți să utilizați câteva condiții în opinia dvs. Similar cu Haml, semnificați codul Ruby care nu ar trebui să fie afișat pe pagină printr-o linie simplă -. Ați văzut acest lucru în exemplul de mai sus, unde am folosit acest lucru pentru a repeta @agents fără a afișa respectiva parte a codului.
Deși ar trebui să încercați să stați departe de tot felul de condiționări în viziunea dvs., acolo unde este posibil și să încercați să găsiți soluții OOP mai bune pentru astfel de cazuri - care este o poveste pentru un alt moment - ar arăta astfel:
- dacă actual_user.role == "admin" p # admintxt | Bine ai revenit stăpânului meu! = link_to "Editați profilul", edit_user_path (: current) = link_to "Logout", logout_path - elsif current_user = link_to "Editați profilul", edit_user_path (: current) = link_to "Logout" = link_to "Login", calea de conectare
<% if current_user.role == "admin" %>Bine ai revenit stăpânului meu!
<%= 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 %>
Dacă doriți să ieșiți codul fără ca HTML să scape în loc, utilizați doar două semne egale ==. Asta e!
Înainte de a continua, ar trebui să-mi dau timpul să menționez acest lucru: După cum știți, tonul de cod de vizualizare a codurilor Ruby în contextul nostru este un miros serios și trebuie minimizat în orice moment. Doar pentru că Slim o face chiar mai îndrăzneață să împletească șabloanele cu tonuri de logică, nu înseamnă că ar trebui. Practica constrângere în acest departament! Făcut drept, pe de altă parte, Slim face cu adevărat elegant pentru a injecta Ruby acolo unde este nevoie.
Dacă simțiți nevoia de a scrie HTML în șabloanele dvs. Slim, aveți opțiunea să. Nu am folosit această caracteristică și nici nu mi-ar plăcea să o folosesc, dar poate că în timpul unei faze de tranziție acest lucru ar putea fi util pentru noii veniți. Hai să vedem super rapid.
doctype html title = full_title (randament (: title)) = stilesheet_link_tag "aplicație", media: 'all',' data-turbolinks-track '=> true = javascript_include_tag' csrf_meta_tags header.navbar .logo = link_to "exemple de aplicații", "root_path", id: "logo" .principal = randament
Când Slim întâlnește brațul unghiular stâng <, știe că vrei să amesteci în unele HTML.
Caracterul conductei | semnalează lui Slim că vrei să ai un cuvânt simplu pentru cuvânt și să copiezi linia. De fapt, aceasta vă permite să evitați orice fel de procesare. Documentația spune că dacă doriți să scrieți cuvinte verbale pe mai multe linii, trebuie să indentați textul cu fiecare ruptură de linie.
corp p | Slim este cel mai bun prieten al meu. Slim este cel mai bun prieten al meu.
Slim este cel mai bun prieten al meu. Slim este cel mai bun prieten al meu.
Dacă introduceți textul pe aceeași linie ca și caracterul de țeavă, puteți seta marginea din stânga după țeavă plus un singur spațiu. Din curiozitate, m-am păcălit cu asta puțin și am găsit următoarele rezultate. Doar varianta ultimului exemplu are un sentiment de sughiț puțin evident pe care ar trebui să-l cunoașteți - înghite primul cuvânt al propoziției.
corp p | Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Și așa mai departe ... p | Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Și așa mai departe ... p Această linie este pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Și așa mai departe ... p Această linie este pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Și așa mai departe ... p Această linie este pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
Modul în care ieșirea este redată în marcajul dvs. HTML diferă puțin.
Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
linia este pe marginea din stânga. line va avea un spațiu în fața acestuia. line va avea două spații în fața acestuia. curând…
Desigur, este necesar să vă comentați din când în când codul. Nu uitați, totuși, că prea multe comentarii sunt un miros, de asemenea. Doar încercați să o păstrați la un minim absolut!
O slash în față / este tot ce aveți nevoie pentru a comenta orice cod.
corp / p | Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
Boom! Și acum acest paragraf a dispărut de pe pagină. Acest comentariu nu lasă urme în marcajul HTML final. Trebuie doar să o aplicați selectorului părinte și toți copiii săi vor fi comentați și ei. Deci, chiar și comentariile sunt subțiri și minime.
Dacă, pe de altă parte, vreți un comentariu HTML care apare în rezultatul final redat, trebuie doar să adăugați un semn de exclamare ! după slash.
corp /! p | Această linie se află pe marginea din stânga. Această linie va avea un spațiu în fața acesteia. Această linie va avea două spații în fața acesteia. Si asa mai departe…
ordinat!
Am folosit comenzi rapide de-a lungul timpului. Când introduceți un punct . sau un simbol hash # îi spui lui Slim că vrei să folosești comenzi rapide predefinite pentru clase și ID-uri. Este cu siguranță un set foarte bun, dar ce puteți face pentru a vă extinde și pentru a crea propriile dvs. fragmente mici de fragmente? Putem face acest lucru atât pentru etichete, cât și pentru atribute. Bine ați venit la minunata lui Slim!
În Rails, trebuie doar să configurați un inițializator cu următorul model:
Slim :: Comanda rapidă pentru motor.set_options: 'c' => tag: 'container', '#' => attr: 'id', ' => atr: 'class'
În aplicațiile Sinatra, pur și simplu adăugați aceeași configurație oriunde sub linia în care vă aflați cere "slim".
Accentsconagua
cereți 'sinatra' necesită 'slim' Slim :: Motor.set_options comanda rapidă: 'c' => tag: 'container', '#' => attr: => attr: 'class' a obține ('/') slim: index __END__ @@ indexul doctype html html titlu Titluri Slim Șabloane corp h1 Șabloane șabloane nivel cu SlimPuteți seta opțiunile pe motorul Slim :: Engine, oferind un hash cu comanda rapidă de care aveți nevoie. În exemplul de mai sus, l-am instruit pe Slim să o folosească c ca o scurtătură pentru o recipient etichetă. Ați folosi acest lucru în fișierele dvs. Slim:
c.content Acum aveți o etichetă container cu o clasă .content.
Și HTML-ul redat ar arăta astfel, bineînțeles:
Acum aveți o etichetă de container cu o clasă .content.
Destul de frumos, nu? Dar nu credeai că acolo se oprește muzica, nu-i așa? Putem să o luăm mai departe. Permiteți-mi să vă dau un exemplu care este mai puțin implicat:
Slim :: Comanda rapidă motor.set_options: '#' => attr: 'id', '.' => atr: 'class', 'c' => tag: 'container' 'role', '^' => attr:% w (rol de date)
În acest exemplu, am creat nu numai etichete personalizate, ci și atribute personalizate la îndemână. Să discutăm acest pas cu pas. Apropo, am rupt opțiunile de hash pe mai multe rânduri, pentru a le putea citi și pentru a evita o linie lungă de cod pe care nimeni nu le place să se poticnească. Citește mult mai frumos, nu crezi?
Prin simbolul ampersand &, acum putem crea o etichetă de intrare și trebuie doar să o hrănim cu un tip - care urmează imediat după ampersand. Putem folosi orice simbol care are sens să folosească; nu este nevoie să folosiți aceeași pe care am făcut-o. Fiți atenți, totuși, și încercați să luați decizii fără compromis în acel departament.
& text nume = "utilizator" & parola nume = "pw" & trimite
Când faceți modificări la acest inițializator cu ajutorul comenzilor rapide personalizate, nu trebuie să uitați să reporniți serverul local. Fără aceasta, modificările dvs. nu vor fi reflectate în timpul procesării prealabile.
Apoi, dacă am nevoie de a rol atribut, acum îl pot prefixa cu un @ simbol.
.persoană @ admin Daniel Mendler
Daniel Mendler
Modificări: Atributul rol este o abordare semantică pentru a descrie rolul elementului în cauză - dacă trebuie să determinați scopul elementului.
Vedeți, prin intermediul punctului ajungem class = "persoană" clasa și @admin ne-a dat rol = "admin". Dandy destul de la îndemână, dar putem face acest mic pas înainte și vom folosi un matrice pentru a specifica mai multe atribute care ar trebui să fie create printr-o singură comandă rapidă.
.nifty ^ hacker CrackDoctor
CrackDoctor
Pentru că am asociat o serie de atribute pentru noi ^ comenzi rapide, Slim creează date-rol și rol atribute simultan printr-un singur simbol. Asta poate fi destul de la îndemână. Imaginați-vă dacă doriți să ieșiți un element similar cu cele de mai jos și o puteți face concis cu o comandă rapidă și cu un cod Ruby.
Scriind toate aceste lucruri de mână nu pare să fie cea mai bună utilizare a timpului dvs. - avem cod pentru a face acel loc de muncă pentru noi. Ei bine, acolo aveți, este tot ce trebuie să știți pentru a vă crea propriul set de comenzi rapide minunate - sau pentru a crea o mizerie mare atunci când nu practicați un pic de constrângere. Mi-ar recomanda să nu treceți peste bord cu acest lucru - în special încercați să stați departe de a defini scurtaturi care utilizează simboluri pe care Slim este deja atașat la.
Reîmprospătare: atributele de date sunt folosite pentru a avea unele date private pe pagina sau pe aplicația dvs. Lucruri care vă ajută să filtrați conținutul, de exemplu. Acestea sunt atribute personalizate care pot fi folosite pe toate elementele HTML. Utilizarea acestora în scopuri JavaScript este o altă practică obișnuită. Este, de asemenea, foarte util pentru testarea elementelor pe o pagină dacă doriți să vă asigurați că anumite elemente apar în sus și doriți să evitați ca designerii să fie încurcați cu stilurile dvs..
Înainte de a pleca, am vrut să vă arăt o scurtă privire în opțiunile vaste de configurare și cum le aplicați. Pentru Rails, ați crea un fișier de mediu cum ar fi config / medii / development.rb și specificați opțiunile de care aveți nevoie. Pur și simplu plasați configurația pe un loc înăuntru Rails.application.configure bloc.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']' ',' '' => '' ',' <'=>'> ' SfârșitÎn această configurație, am asigurat că eticheta implicită care este creată dacă o etichetă este omisă este a tag-not a div tag, care este setarea standard. De asemenea, am ajustat tab-ul pentru a utiliza două spații albe și în cele din urmă a adăugat încă două delimitatoare pentru ambalarea atributelor tagurilor. Acum pot folosi <> și "" precum și pentru asta. Nu este deloc util, dar bun pentru demonstrații.
În exemplul de mai jos, puteți vedea că toate delimitatoarele pentru ambalajele de atribute creează aceeași ieșire - și asta .unele clasă sau # Unele id- creează etichete per implicit.
corpul #zeroth a href = "http://slim-lang.com" title = "Pagina de pornire" Găsiți pagina de pornire .first a [href = "http://slim-lang.com" title = " pagina "] Accesați pagina de pornire a doua secțiune (href =" http://slim-lang.com "title =" Pagina principală ") Accesați pagina de pornire .third aDu-te la pagina de pornire .fourth a" href = "http://slim-lang.com" title = "Prima pagină" "
Du-te la pagina de start Mergeți la pagina de start Mergeți la pagina de pornire Mergeți la pagina de pornire Mergeți la pagina de pornire
Alternativ, puteți să setați și aceste chestii config / initializatori / slim.rb așa cum v-am arătat în secțiunea despre comenzile rapide personalizate.
Pentru Sinatra, este vorba despre aceleasi exercitii precum cele discutate in sectiunea shortcuts. Doar setați opțiunile undeva sub dvs. cere "slim" declarație și sunteți bine să mergeți.
Consultați documentația din "Opțiuni disponibile" pentru a citi mai multe despre ceea ce este disponibil pentru configurare. Slim vă oferă multe opțiuni de joc.
Asta este în esență. Există unul sau două subiecte mai avansate pe care ar trebui să le faceți în cazul în care este necesar, dar m-am gândit că ele nu sunt în mare parte prietenoase pentru începători și nici nu sunt utilizate intens în fiecare zi. Am vrut să păstrez lucrurile simple și să vă arăt tot ce aveți nevoie pentru a trece rapid la acest minunat, minunat motor templating. Distrează-te și sper că Slim este acum una dintre cele mai preferate jucării tale!
