Ruby on Rails
Puntos de vista
Buscar..
Parciales
Las plantillas parciales (parciales) son una forma de dividir el proceso de representación en partes más manejables. Los parciales le permiten extraer fragmentos de código de sus plantillas en archivos separados y también reutilizarlos en todas sus plantillas.
Para crear un parcial, cree un nuevo archivo que comience con un guión bajo: _form.html.erb
Para representar un parcial como parte de una vista, use el método de procesamiento dentro de la vista: <%= render "form" %>
- Tenga en cuenta, el subrayado se deja de lado cuando la representación
- Se debe representar un parcial usando su ruta si se encuentra en una carpeta diferente
Para pasar una variable al parcial como una variable local, use esta notación:
<%= render :partial => 'form', locals: { post: @post } %>
Los parciales también son útiles cuando necesita reutilizar exactamente el mismo código ( filosofía DRY ).
Por ejemplo, para reutilizar el código <head>
, cree un parcial llamado _html_header.html.erb
, ingrese su código <head>
para ser reutilizado, y haga el parcial cuando sea necesario: <%= render 'html_header' %>
.
Objetos parciales
Los objetos que responden a to_partial_path
también se pueden representar, como en <%= render @post %>
. De forma predeterminada, para los modelos ActiveRecord, esto será algo así como posts/post
, por lo que al renderizar @post
, se views/posts/_post.html.erb
las views/posts/_post.html.erb
archivo views/posts/_post.html.erb
.
Una post
local con nombre será asignada automáticamente. Al final, <%= render @post %>
es una mano corta para <%= render 'posts/post', post: @post %>
.
También se pueden proporcionar colecciones de objetos que responden a to_partial_path
, como <%= render @posts %>
. Cada elemento será renderizado consecutivamente.
Parciales globales
Para crear un parcial global que pueda usarse en cualquier lugar sin hacer referencia a su ruta exacta, el parcial debe ubicarse en la ruta de las views/application
. El ejemplo anterior se ha modificado a continuación para ilustrar esta característica.
Por ejemplo, esta es una ruta a una app/views/application/_html_header.html.erb:
parcial global app/views/application/_html_header.html.erb:
Para representar este parcial global en cualquier lugar, use <%= render 'html_header' %>
AssetTagHelper
Para permitir que los rieles vinculen de forma automática y correcta los recursos (css / js / images) en la mayoría de los casos, usted quiere usar ayudantes integrados. ( Documentación oficial )
Ayudantes de imagen
ruta de la imagen
Esto devuelve la ruta a un recurso de imagen en app/assets/images
asset app/assets/images
.
image_path("edit.png") # => /assets/edit.png
URL de la imagen
Esto devuelve la URL completa a un activo de imagen en app/assets/images
asset app/assets/images
.
image_url("edit.png") # => http://www.example.com/assets/edit.png
etiqueta_imagen
Utilice este asistente si desea incluir una <img src="" />
con el conjunto de fuentes.
image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />
Ayudantes de JavaScript
javascript_include_tag
Si desea incluir un archivo JavaScript en su vista.
javascript_include_tag "application" # => <script src="/assets/application.js"></script>
javascript_path
Esto devuelve la ruta de su archivo JavaScript.
javascript_path "application" # => /assets/application.js
javascript_url
Esto devuelve la URL completa de su archivo JavaScript.
javascript_url "application" # => http://www.example.com/assets/application.js
Ayudantes de hojas de estilo
stylesheet_link_tag
Si desea incluir un archivo CSS en su vista.
stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />
stylesheet_path
Esto devuelve la ruta de su activo hoja de estilo.
stylesheet_path "application" # => /assets/application.css
stylesheet_url
Esto devuelve la URL completa de su elemento de hoja de estilo.
stylesheet_url "application" # => http://www.example.com/assets/application.css
Ejemplo de uso
Al crear una nueva aplicación de Rails, automáticamente tendrá dos de estos ayudantes en app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Esto 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>
Estructura
A medida que Rails sigue el patrón M V C, las Views
son donde están sus "plantillas" para sus acciones.
Digamos que tienes un controlador articles_controller.rb
. Para este controlador, tendría una carpeta en vistas llamada 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
|
'-- [...]
Esta estructura le permite tener una carpeta para cada controlador. Al llamar a una acción en su controlador, la vista correspondiente se representará automáticamente.
// articles_controller.rb
class ArticlesController < ActionController::Base
def show
end
end
// show.html.erb
<h1>My show view</h1>
Reemplazar el código HTML en las vistas
Si alguna vez quiso determinar el contenido html que se imprimirá en una página durante el tiempo de ejecución, Rails tiene una muy buena solución para eso. Tiene algo que se llama content_for, que nos permite pasar un bloque a una vista de rieles. Por favor, consulte el siguiente ejemplo,
Declarar el contenido
<div>
<%= yield :header %>
</div>
<% content_for :header do %>
<ul>
<li>Line Item 1</li>
<li>Line Item 2</li>
</ul>
<% end %>
HAML - una forma alternativa de usar en tus vistas
HAML (lenguaje de marcado de abstracción HTML) es una forma hermosa y elegante de describir y diseñar el HTML de sus vistas. En lugar de abrir y cerrar etiquetas, HAML usa sangría para la estructura de sus páginas. Básicamente, si se debe colocar algo dentro de otro elemento, solo se debe sangrar utilizando una tabulación. Las pestañas y el espacio en blanco son importantes en HAML, así que asegúrese de usar siempre la misma cantidad de pestañas.
Ejemplos:
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>
Y en HAML:
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'
Verás, la estructura del diseño es mucho más clara que usar HTML y ERB.
Instalación
Solo instala la gema usando
gem install haml
y agregar la gema al Gemfile
gem "haml"
Para usar HAML en lugar de HTML / ERB, simplemente reemplace las extensiones de archivo de sus vistas desde something.html.erb
a something.html.haml
.
Consejos rápidos
Los elementos comunes como divs se pueden escribir de una manera corta
HTML
<div class="myclass">My Text</div>
HAML
%div.myclass
HAML, taquigrafía
.myclass
Atributos
HTML
<p class="myclass" id="myid">My paragraph</p>
HAML
%p{:class => "myclass", :id => "myid"} My paragraph
Insertando código rubí
Puede insertar código ruby con los signos = y -.
= link_to "Home", home_path
El código que comienza con = se ejecutará e incrustará en el documento.
Código que comienza con : se ejecutará, pero no se insertará en el documento.
Documentación completa
Es muy fácil comenzar con HAML, pero también es muy complejo, así que recomiendo leer la documentación .