Share
Nella seconda e ultima parte di questa mini serie, completeremo questa introduzione con sezioni sull'emissione di codice Ruby, interpolazione, testo semplice e su come personalizzare Slim in base alle tue esigenze. Dopo quell'articolo dovresti essere pronto per qualche azione sottile.
Hai già visto un po 'come usare Ruby nei tuoi modelli. Questa sezione ti offre tutto il necessario per farne uso. Nel primo articolo, abbiamo già utilizzato Ruby nei nostri modelli. Lascia che ti ricordi cosa intendo:
html head title = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Come puoi vedere, all'interno di questo head tag, abbiamo già utilizzato un paio di metodi da Rails per gestire stili e JavaScript, niente di importante. Tutto ciò che devi fare per eseguire il codice Ruby è anteposto a un uguale = cartello. Se il codice deve essere distribuito su più righe, è sufficiente aggiungere una barra rovesciata \ alla fine di ogni riga e continua a passare al successivo. Dovresti finire la frase in una virgola ,, quindi non hai bisogno del backslash. Bel tocco se me lo chiedi.
Diamo un'occhiata a un altro esempio più concreto. Scrivere le forme è spesso un dolore, un sacco di codice, molte ripetizioni e tutto questo temuto <%= %> firma in ERB. Questo può diventare complicato in nessun tempo. Potrebbe essere più bello, eh?
<%= 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 %>
Un sacco di cose da scrivere per creare un nuovo @agente oggetto, no? Slim ti consente di gestirlo in modo molto più succinto. Manteniamo solo il segno di uguale e ci sbarazziamo della maggior parte delle altre cose. 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
Puoi vedere chiaramente perché questo progetto si chiama Slim. Così tanto grasso in eccesso non c'è più. Non dirmi che non ti piace quello che vedi, so che lo stai scavando! Solo un = accedi e puoi popolare il tuo markup con il codice Ruby, in questo caso da Rails, ovviamente. E quando lo paragoni all'HTML reso nella pagina finale, è difficile ignorare quanto sia davvero compatto Slim.
Ricorda la domanda iniziale che il team di base di Slim è guidato da: "Qual è il minimo richiesto per fare in modo che funzioni?" Quando guardi l'output HTML finale, suppongo sia giusto dire che Slim ha risposto a questa domanda in modo abbastanza soddisfacente: nessun reclamo dalla mia parte. Voglio aggiungere un paio di piccoli esempi per darti più opportunità per abituarmi a come appare in Slim.
Questo frammento ERB ...
<%= render "shared/agents", collection: @agents %>
... diventa questo in Slim:
= render "shared / agents", collection: @agents
Agents
h2 Agenti ul - @ agents.each do | agent | li.agent div | Nome: = agent.name div | Numero: = agent.number div | Licenza per uccidere: = agent.licence_to_kill
Puoi anche scrivere questo in modo più semplificato tramite l'interpolazione. Non vuoi diventare troppo pazzo con quello, però. Questo sarebbe simile a questo allora:
h2 Agenti ul - @ agents.each do | agent | li.agent div Nome: # agent.name div Numero: # agent.number div Licenza di uccisione: # agent.licence_to_kill
Ne ho parlato brevemente, ma poiché è una forma di emissione del codice Ruby, appartiene a questa sezione. Ovviamente è possibile utilizzare l'interpolazione di testo standard da Ruby anche nei modelli Slim.
h2 Benvenuto Mr. # misix_agent.surname! Mi aspetto che tu muoia! h2 Benvenuto Mr. \ # misix_agent.surname! Mi aspetto che tu muoia!
Benvenuto Mr. Bond! Mi aspetto che tu muoia!
Benvenuto Mr. \ # misix_agent.surname! Mi aspetto che tu muoia!
Come visto sopra, una semplice barra retroversa \ sfugge all'interpolazione.
Uno in più per la strada. Diciamo che vuoi usare un paio di condizionali nella tua vista. Simile a Haml, si indica il codice Ruby che non dovrebbe essere emesso nella pagina da un semplice trattino -. Hai visto questo nell'esempio sopra in cui lo abbiamo usato per iterare sopra @agents senza visualizzare quella particolare parte del codice.
Anche se dovresti cercare di stare lontano da tutti i tipi di condizionali nei tuoi punti di vista, ove possibile, e cercare di trovare soluzioni OOP migliori per questi casi - che è una storia per un altro tempo - assomigliano a questo:
- if current_user.role == "admin" p # admintxt | Bentornato il mio padrone! = link_to "Modifica profilo", 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" %>Bentornato il mio padrone!
<%= 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 %>
Se si desidera eseguire l'output del codice senza escape HTML, utilizzare solo due segni di uguale ==. Questo è tutto!
Prima di andare avanti, dovrei assolutamente prendere il tempo per dirlo: come speri tu sappia, tonnellate di codice vista, ovvero tonnellate di codice Ruby nel nostro contesto, sono un odore serio e dovrebbero essere minimizzate in ogni momento. Solo perché Slim lo rende forse ancora più allettante per intonacare i tuoi modelli con un sacco di logica, non significa che dovresti. Esercitare un vincolo in quel dipartimento! Fatto bene, d'altra parte, Slim rende davvero elegante l'iniezione di Ruby dove necessario.
Se senti la necessità di scrivere HTML nei tuoi modelli Slim, hai la possibilità di farlo. Non ho usato questa funzione, né mi piacerebbe usarla, ma forse durante una fase di transizione questo potrebbe essere utile per i nuovi arrivati. Diamo un'occhiata super veloce.
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 "sample app", "root_path", id: "logo" .principale = rendimento
Quando Slim incontra la parentesi angolare sinistra <, sa che vuoi mescolare un po 'di HTML.
Il personaggio della pipa | segnala a Slim che vuoi avere un semplice testo parola per parola e copia semplicemente la linea. In effetti, questo ti consente di evitare qualsiasi tipo di elaborazione. La documentazione dice che se vuoi scrivere del testo letterale su più righe, devi far rientrare il testo con ogni interruzione di riga.
corpo p | Slim è il mio nuovo migliore amico. Slim è il mio nuovo migliore amico.
Slim è il mio nuovo migliore amico. Slim è il mio nuovo migliore amico.
Se metti il testo sulla stessa riga del carattere pipe, puoi impostare il margine sinistro dopo la pipe più uno spazio singolo. Per curiosità, ho scherzato un po 'con questo e ho trovato i seguenti risultati. Solo l'ultima variante di esempio ha un singhiozzo ovvio di cui dovresti essere a conoscenza: ingoia la prima parola della frase.
corpo p | Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via ... p | Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via ... p Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via ... p Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via ... p Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
Il modo in cui l'output è reso nel tuo markup HTML è leggermente diverso.
Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
la linea è sul margine sinistro. la linea avrà uno spazio davanti ad essa. la linea avrà due spazi davanti. presto…
Ovviamente è necessario commentare il tuo codice ogni tanto. Non dimenticare, però, che anche troppi commenti sono un odore. Cerca di mantenerlo al minimo!
Una barra in avanti / è tutto ciò che serve per commentare qualsiasi codice.
corpo / p | Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
Boom! E ora questo paragrafo è sparito dalla pagina. Questo commento non lascia traccia nel markup HTML finale. Hai solo bisogno di applicarlo al selettore genitore e tutti i suoi figli saranno commentati pure. Quindi, anche i commenti sono snelli e minimi.
Se, d'altra parte, vuoi un commento HTML che appare nell'output finale renderizzato, è sufficiente aggiungere un punto esclamativo ! dopo il taglio.
corpo /! p | Questa linea è sul margine sinistro. Questa linea avrà uno spazio davanti ad essa. Questa linea avrà due spazi davanti ad essa. E così via…
pulito!
Abbiamo sempre usato scorciatoie. Quando si digita un punto . o un simbolo di hash # Dici a Slim che vuoi usare scorciatoie predefinite per classi e ID. Questo è sicuramente un ottimo default, ma cosa puoi fare per ampliarlo e creare i tuoi piccoli snippet? Possiamo farlo allo stesso modo per tag e attributi. Benvenuti nella grandiosità di Slim!
In Rails, abbiamo solo bisogno di impostare un inizializzatore con il seguente modello:
Slim :: Scelta rapida Engine.set_options: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class'
Nelle app Sinatra, devi semplicemente aggiungere la stessa configurazione ovunque sotto la linea in cui ti trovi richiedere 'slim'.
Accentsconagua
richiede 'sinatra' richiede la scorciatoia 'slim' Slim :: Engine.set_options: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html head title Modelli slim body h1 Modelli Boss Level con SlimPuoi impostare le opzioni su Slim :: Engine fornendo un hash con il collegamento che ti serve. Nell'esempio sopra, abbiamo chiesto a Slim di usarlo c come scorciatoia per a contenitore etichetta. Lo useresti in questo modo nei tuoi file Slim:
c.content Ora hai un tag contenitore con una classe .content.
E l'HTML reso sarebbe simile a questo, ovviamente:
Ora hai un tag contenitore con una classe .content.
Abbastanza carino, eh? Ma non pensavi che fosse lì che la musica si fermava, vero? Possiamo portarlo oltre. Permettetemi di darvi un esempio che è un po 'più coinvolto:
Slim :: Scelta rapida Engine.set_options: '#' => attr: 'id', '.' => attr: 'class', 'c' => tag: 'container', '&' => tag: 'input', attr: 'tipo', '@' => attr: 'role', '^' => attr:% w (ruolo dei dati)
In questo esempio, non ho solo creato tag personalizzati, ma ho anche fornito utili attributi personalizzati. Analizziamo questo passo dopo passo. A proposito, ho rotto l'hash delle opzioni su più righe per tenerlo leggibile e per evitare di avere una lunga riga di codice che a nessuno piace inciampare. Legge molto meglio, non credi?
Tramite il simbolo e commerciale &, ora possiamo creare un tag di input e abbiamo solo bisogno di alimentarlo con un tipo, che segue immediatamente la e commerciale. Possiamo usare qualsiasi simbolo che abbia senso usare; non c'è bisogno di usare lo stesso che ho fatto. Fai attenzione, però, e cerca di prendere decisioni intransigenti in quel dipartimento.
& text name = "utente" & password name = "pw" & submit
Quando si apportano modifiche a questo inizializzatore con le scorciatoie personalizzate, non si deve dimenticare di riavviare il server locale. Senza di ciò, le modifiche non verranno riflesse durante la pre-elaborazione.
Successivamente, se ho bisogno di a ruolo attributo, ora posso solo prefissarlo con un @ simbolo.
.persona @ admin Daniel Mendler
Daniel Mendler
Refresher: l'attributo role è un approccio semantico per descrivere il ruolo dell'elemento in questione, se è necessario determinare lo scopo dell'elemento.
Vedi, tramite il punto otteniamo a class = "persona" classe e il @admin ci ha dato un role = "admin". Dandy abbastanza maneggevole, ma possiamo fare un piccolo passo in più e usare un array per specificare più attributi che dovrebbero essere creati tramite una singola scorciatoia.
.nifty ^ hacker CrackDoctor
CrackDoctor
Perché abbiamo associato una serie di attributi per il nostro ^ scorciatoia, Slim crea Dati-ruolo e ruolo attributi contemporaneamente tramite un singolo simbolo. Questo può essere abbastanza utile. Immagina se vuoi generare un elemento simile al seguente e farlo concisamente con un collegamento e un codice Ruby.
Scrivere tutto questo a mano sembra non essere il miglior uso del tuo tempo: abbiamo il codice per fare quel lavoro per noi. Bene, ecco, è tutto quello che devi sapere per creare il tuo set di scorciatoie fantastiche o creare un gran casino quando non ti eserciti un po 'di costrizione. Raccomanderei di non esagerare con questo, specialmente cercare di evitare di definire scorciatoie che usano i simboli che Slim è già associato a.
Aggiornamento: gli attributi dei dati vengono utilizzati per avere alcuni dati privati sulla tua pagina o applicazione. Roba che ti aiuta a filtrare i contenuti, per esempio. Sono attributi personalizzati che possono essere utilizzati su tutti gli elementi HTML. Usarli per scopi JavaScript è un'altra pratica comune. È anche molto utile per testare gli elementi di una pagina se vuoi assicurarti che si mostrino particolari elementi e vuoi evitare che i designer si pasticciano con i tuoi stili.
Prima di partire, volevo mostrarti un piccolo sguardo sulle vaste opzioni di configurazione e su come applicarle. Per Rails, devi creare un file di ambiente come config / ambienti / development.rb e specificare le opzioni necessarie. Devi semplicemente posizionare la tua configurazione in qualche posto all'interno del Rails.application.configure bloccare.
Rails.application.configure fa Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' "'=>'" ',' <'=>'> ' FineIn questa configurazione mi sono assicurato che il tag predefinito che viene creato se viene omesso il nome di un tag sia a tag-non a div tag, che è l'impostazione standard. Inoltre, ho regolato la tabsize per utilizzare due spazi bianchi e infine aggiunto due ulteriori delimitatori per il wrapping degli attributi dei tag. Ora posso usare <> e "" anche per quello. Non molto utile ma buono a scopo dimostrativo.
Nell'esempio seguente, puoi vedere che tutti i delimitatori per i wrapper di attributi creano lo stesso output, anche questo .un po 'di classe o # Some-id crea tag per impostazione predefinita.
body #zeroth a href = "http://slim-lang.com" title = "Home page" Vai alla home page .prima a [href = "http://slim-lang.com" title = "Home pagina "] Vai alla pagina iniziale .secondo a (href =" http://slim-lang.com "title =" Pagina iniziale ") Vai alla pagina iniziale .third aVai alla home page .fourth a" href = "http://slim-lang.com" title = "Pagina iniziale" "Vai alla home page
Vai alla home page Vai alla home page Vai alla home page Vai alla home page Vai alla home page
In alternativa, puoi anche impostare questa roba in config / inizializzatori / slim.rb come ti ho mostrato nella sezione sulle scorciatoie personalizzate.
Per Sinatra, è lo stesso trapano come discusso anche nella sezione scorciatoie. Basta impostare le opzioni da qualche parte sotto il tuo richiedere 'slim' dichiarazione e sei a posto.
Dai un'occhiata alla documentazione sotto "Opzioni disponibili" per saperne di più su ciò che è disponibile per la configurazione. Slim ti offre molte opzioni con cui giocare.
Questo è fondamentalmente. Ci sono uno o due argomenti più avanzati che dovresti approfondire se necessario, ma pensavo che non fossero per lo più adatti ai principianti né molto usati quotidianamente. Volevo mantenere le cose semplici e mostrarti tutto ciò di cui hai bisogno per passare rapidamente a questo fantastico motore di template. Divertiti, e spero che Slim sia diventato uno dei tuoi nuovi giocattoli preferiti!
