Ruby on Rails
Des vues
Recherche…
Partiels
Les modèles partiels (partiels) permettent de décomposer le processus de rendu en morceaux plus faciles à gérer. Les Partials vous permettent d'extraire des morceaux de code de vos modèles pour séparer les fichiers et les réutiliser dans tous vos modèles.
Pour créer un partiel, créez un nouveau fichier qui commence par un trait de soulignement: _form.html.erb
Pour rendre un partiel dans une vue, utilisez la méthode de rendu dans la vue: <%= render "form" %>
- Notez que le trait de soulignement est omis lors du rendu
- Un partiel doit être rendu en utilisant son chemin s'il est situé dans un autre dossier
Pour passer une variable dans le partiel en tant que variable locale, utilisez cette notation:
<%= render :partial => 'form', locals: { post: @post } %>
Les partiels sont également utiles lorsque vous devez réutiliser exactement le même code ( philosophie DRY ).
Par exemple, pour réutiliser le code <head> , créez un partiel nommé _html_header.html.erb , entrez votre code <head> à réutiliser et restituez le partiel lorsque cela est nécessaire: <%= render 'html_header' %> .
Object Partials
Les objets qui répondent à to_partial_path peuvent également être rendus, comme dans <%= render @post %> . Par défaut, pour les modèles ActiveRecord, ce sera quelque chose comme posts/post , donc en @post réellement @post , le fichier views/posts/_post.html.erb sera rendu.
Un post local nommé sera automatiquement attribué. Au final, <%= render @post %> est un raccourci pour <%= render 'posts/post', post: @post %> .
Des collections d'objets répondant à to_partial_path peuvent également être fournies, telles que <%= render @posts %> . Chaque article sera rendu consécutivement.
Partials globaux
Pour créer un partiel global pouvant être utilisé n'importe où sans faire référence à son chemin exact, le partiel doit être situé dans le chemin des views/application . L'exemple précédent a été modifié ci-dessous pour illustrer cette fonctionnalité.
Par exemple, il s'agit d'un chemin d'accès à une app/views/application/_html_header.html.erb: partielle globale app/views/application/_html_header.html.erb:
Pour rendre ce partiel global n'importe où, utilisez <%= render 'html_header' %>
AssetTagHelper
Laisser les rails relier automatiquement et correctement les ressources (css / js / images) dans la plupart des cas, vous souhaitez utiliser des aides intégrées. ( Documentation officielle )
Aides à l'image
chemin_image
Cela renvoie le chemin d'accès à un élément d'image dans app/assets/images .
image_path("edit.png") # => /assets/edit.png
URL de l'image
Cela renvoie l'URL complète à un élément d'image dans app/assets/images .
image_url("edit.png") # => http://www.example.com/assets/edit.png
image_tag
Utilisez cette aide si vous souhaitez inclure une étiquette <img src="" /> avec l'ensemble source.
image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />
Assistants JavaScript
javascript_include_tag
Si vous souhaitez inclure un fichier JavaScript dans votre vue.
javascript_include_tag "application" # => <script src="/assets/application.js"></script>
javascript_path
Cela retourne le chemin de votre fichier JavaScript.
javascript_path "application" # => /assets/application.js
javascript_url
Cela renvoie l'URL complète de votre fichier JavaScript.
javascript_url "application" # => http://www.example.com/assets/application.js
Aides à la feuille de style
stylesheet_link_tag
Si vous souhaitez inclure un fichier CSS dans votre vue.
stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />
stylesheet_path
Cela renvoie le chemin de votre actif de feuille de style.
stylesheet_path "application" # => /assets/application.css
stylesheet_url
Cela renvoie l'URL complète de votre ressource de feuille de style.
stylesheet_url "application" # => http://www.example.com/assets/application.css
Exemple d'utilisation
Lors de la création d'une nouvelle application rails, vous aurez automatiquement deux de ces assistants dans app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Cela produit:
// 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>
Structure
Comme Rails suit le pattern M V C Les Views sont là où vos "templates" sont pour vos actions.
Disons que vous avez un contrôleur articles_controller.rb . Pour ce contrôleur, vous auriez un dossier dans les vues appelé 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
|
'-- [...]
Cette structure vous permet d'avoir un dossier pour chaque contrôleur. Lorsque vous appelez une action dans votre contrôleur, la vue appropriée sera automatiquement affichée.
// articles_controller.rb
class ArticlesController < ActionController::Base
def show
end
end
// show.html.erb
<h1>My show view</h1>
Remplacer le code HTML dans les vues
Si vous avez toujours voulu déterminer le contenu HTML à imprimer sur une page au moment de l'exécution, alors rails a une très bonne solution pour cela. Il a quelque chose appelé content_for qui nous permet de passer un bloc à une vue de rails. S'il vous plaît vérifier l'exemple ci-dessous,
Déclarer contenu_pour
<div>
<%= yield :header %>
</div>
<% content_for :header do %>
<ul>
<li>Line Item 1</li>
<li>Line Item 2</li>
</ul>
<% end %>
HAML - une autre façon d'utiliser dans vos vues
HAML (langage de balisage d'abstraction HTML) est une manière élégante et belle de décrire et de concevoir le code HTML de vos vues. Au lieu d'ouvrir et de fermer les balises, HAML utilise l'indentation pour la structure de vos pages. Fondamentalement, si quelque chose doit être placé dans un autre élément, il vous suffit de le mettre en retrait en utilisant une tabulation. Les tabulations et les espaces blancs sont importants dans HAML, assurez-vous donc d'utiliser toujours le même nombre d'onglets.
Exemples:
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>
Et dans HAML:
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'
Vous voyez, la structure de la mise en page est beaucoup plus claire qu'avec HTML et ERB.
Installation
Il suffit d'installer le bijou en utilisant
gem install haml
et ajouter la gemme au Gemfile
gem "haml"
Pour utiliser HAML au lieu de HTML / ERB, remplacez simplement les extensions de fichier de something.html.erb par something.html.haml chose.html.haml.
Conseils rapides
Les éléments communs comme les divs peuvent être écrits de manière courte
HTML
<div class="myclass">My Text</div>
HAML
%div.myclass
HAML, sténographie
.myclass
Les attributs
HTML
<p class="myclass" id="myid">My paragraph</p>
HAML
%p{:class => "myclass", :id => "myid"} My paragraph
Insérer le code ruby
Vous pouvez insérer un code Ruby avec les signes = et -.
= link_to "Home", home_path
Le code commençant par = sera exécuté et incorporé dans le document.
Le code commençant par - sera exécuté, mais pas inséré dans le document.
Documentation complète
HAML est très facile au début, mais est également très complexe, donc je vous recommande de lire la documentation .