Ruby on Rails
Visualizzazioni
Ricerca…
parziali
I modelli parziali (partial) sono un modo per rompere il processo di rendering in blocchi più gestibili. I partial consentono di estrarre parti di codice dai modelli per separare i file e riutilizzarli anche nei modelli.
Per creare un partial, crea un nuovo file che inizia con un carattere di sottolineatura: _form.html.erb
Per rendere un partial come parte di una vista, usa il metodo render nella vista: <%= render "form" %>
- Nota, il carattere di sottolineatura viene omesso durante il rendering
- Un partial deve essere reso utilizzando il suo percorso se si trova in una cartella diversa
Per passare una variabile nel partial come variabile locale, usa questa notazione:
<%= render :partial => 'form', locals: { post: @post } %>
I partial sono utili anche quando è necessario riutilizzare esattamente lo stesso codice ( filosofia DRY ).
Ad esempio, per riutilizzare il codice <head> , creare un partial denominato _html_header.html.erb , inserire il codice <head> da riutilizzare e rendere il partial quando necessario: <%= render 'html_header' %> .
Oggetti parziali
Anche gli oggetti che rispondono a to_partial_path possono essere visualizzati, come in <%= render @post %> . Di default, per i modelli ActiveRecord, questo sarà qualcosa di simile a posts/post , quindi in realtà il rendering di @post , il file views/posts/_post.html.erb sarà reso.
Un post denominato locale verrà assegnato automaticamente. Alla fine, <%= render @post %> è una mano breve per <%= render 'posts/post', post: @post %> .
Possono anche essere fornite raccolte di oggetti che rispondono a to_partial_path , come <%= render @posts %> . Ogni oggetto sarà reso consecutivamente.
Global Partials
Per creare un partial globale che può essere utilizzato ovunque senza fare riferimento al suo percorso esatto, il partial deve essere posizionato nel percorso views/application . L'esempio precedente è stato modificato di seguito per illustrare questa funzionalità.
Ad esempio, questo è un percorso per app/views/application/_html_header.html.erb: parziale app/views/application/_html_header.html.erb:
Per rendere questo parziale globale ovunque, usa <%= render 'html_header' %>
AssetTagHelper
Per consentire ai binari di collegare automaticamente e correttamente le risorse (css / js / images) nella maggior parte dei casi, si desidera utilizzare gli helper integrati. ( Documentazione ufficiale )
Aiutanti di immagini
percorso_immagine
Ciò restituisce il percorso di un asset immagine in app/assets/images .
image_path("edit.png") # => /assets/edit.png
URL dell'immagine
Ciò restituisce l'URL completo a una risorsa immagine in app/assets/images .
image_url("edit.png") # => http://www.example.com/assets/edit.png
image_tag
Usa questo helper se vuoi includere un <img src="" /> -tag con il set sorgente.
image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />
Helper JavaScript
javascript_include_tag
Se si desidera includere un file JavaScript nella propria vista.
javascript_include_tag "application" # => <script src="/assets/application.js"></script>
javascript_path
Questo restituisce il percorso del tuo file JavaScript.
javascript_path "application" # => /assets/application.js
javascript_url
Questo restituisce l'URL completo del tuo file JavaScript.
javascript_url "application" # => http://www.example.com/assets/application.js
Aiutanti foglio di stile
stylesheet_link_tag
Se si desidera includere un file CSS nella propria vista.
stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />
stylesheet_path
Ciò restituisce il percorso dell'asset del foglio di stile.
stylesheet_path "application" # => /assets/application.css
stylesheet_url
Questo restituisce l'URL completo della risorsa del foglio di stile.
stylesheet_url "application" # => http://www.example.com/assets/application.css
Esempio di utilizzo
Quando crei una nuova app per rails, avrai automaticamente due di questi helper in app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Questo produce:
// CSS
<link rel="stylesheet" media="all" href="/assets/application.self-e19d4b856cacba4f6fb0e5aa82a1ba9aa4ad616f0213a1259650b281d9cf6b20.css?body=1" data-turbolinks-track="reload" />
// JavaScript
<script src="/assets/application.self-619d9bf310b8eb258c67de7af745cafbf2a98f6d4c7bb6db8e1b00aed89eb0b1.js?body=1" data-turbolinks-track="reload"></script>
Struttura
Come Rails segue il pattern M V C Le Views sono dove i tuoi "templates" sono per le tue azioni.
Supponiamo che tu abbia un controller articles_controller.rb . Per questo controller avresti una cartella in viste chiamata app/views/articles :
app
|-- controllers
| '-- articles_controller.rb
|
'-- views
'-- articles
| |- index.html.erb
| |- edit.html.erb
| |- show.html.erb
| |- new.html.erb
| '- _partial_view.html.erb
|
'-- [...]
Questa struttura ti consente di avere una cartella per ogni controller. Quando si chiama un'azione nel controller, la vista appropriata verrà resa automaticamente.
// articles_controller.rb
class ArticlesController < ActionController::Base
def show
end
end
// show.html.erb
<h1>My show view</h1>
Sostituisci il codice HTML in Views
Se hai mai voluto determinare il contenuto html da stampare su una pagina durante il runtime, allora rails ha un'ottima soluzione per questo. Ha qualcosa chiamato content_for che ci consente di passare un blocco a una vista di binari. Si prega di controllare l'esempio di seguito,
Dichiara content_for
<div>
<%= yield :header %>
</div>
<% content_for :header do %>
<ul>
<li>Line Item 1</li>
<li>Line Item 2</li>
</ul>
<% end %>
HAML: un modo alternativo di utilizzare nelle tue visualizzazioni
HAML (linguaggio di markup di astrazione HTML) è un modo bello ed elegante per descrivere e progettare l'HTML delle tue visualizzazioni. Invece di aprire e chiudere i tag, HAML utilizza il rientro per la struttura delle tue pagine. Fondamentalmente, se qualcosa deve essere posizionato all'interno di un altro elemento, lo si indenta semplicemente usando un punto di tabulazione. Le schede e lo spazio bianco sono importanti in HAML, quindi assicurati di utilizzare sempre la stessa quantità di schede.
Esempi:
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>
E in HAML:
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'
Vedete, la struttura del layout è molto più chiara rispetto all'utilizzo di HTML e ERB.
Installazione
Basta installare la gemma usando
gem install haml
e aggiungi la gemma al Gemfile
gem "haml"
Per utilizzare HAML anziché HTML / ERB, basta sostituire le estensioni dei file delle tue visualizzazioni da something.html.erb a something.html.haml .
Consigli rapidi
Elementi comuni come le div possono essere scritti in modo breve
HTML
<div class="myclass">My Text</div>
HAML
%div.myclass
HAML, stenografia
.myclass
attributi
HTML
<p class="myclass" id="myid">My paragraph</p>
HAML
%p{:class => "myclass", :id => "myid"} My paragraph
Inserimento di codice rubino
Puoi inserire il codice rubino con i segni = e -.
= link_to "Home", home_path
Il codice che inizia con = sarà eseguito e incorporato nel documento.
Il codice che inizia con - verrà eseguito, ma non inserito nel documento.
Documentazione completa
HAML è molto facile da iniziare, ma è anche molto complesso, quindi consiglierò di leggere la documentazione .