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

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 .



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow