Intégrer les fichiers JavaScript et CSS avec Rails
Deux méthodes standards de l'infrastructure de développement Ruby on Rails permettent de spécifier un bloc en vue de l'afficher ensuite dans une page Web entre les balises HTML désirées.
Un code HTML valide nécessite d'intégrer les fichiers javascripts et CSS uniquement entre les balises <header> de vos pages. Il arrive pourtant fréquemment que l'on ai besoin d'un fichier CSS ou JavaScript propre à une vue ou à un partial. Dans ce cas nous serions tenter de simplement intégrer les fichiers JavaScript et CSS dans ce fichier. Pourtant il existe des alternatives simples et efficaces afin de s'assurer que ces inclusions soient bien faites entre les balises <header> de votre page.
Vous pouvez par exemple utiliser les plugins Styler et Javascripters qui vous demande de renommer vos fichiers en fonction des nom d'actions ou de contrôleurs ou vous voulez qu'ils soient inclus. Celui-ci présente de gros inconvénients puisque si vous souhaitez inclure deux fichiers CSS spécifiques, vous êtes obligé de les concaténer dans un seul fichier ce qui n'est, vous en conviendrez, pas toujours très "DRY" (Don't Repeat Yourself - Ne vous répétez pas).
La solution : les méthodes content_for et yeld
Needy controllers est un autre plugin qui vous permet de spécifier les fichiers JavaScript et CSS à inclure directement dans vos contrôleurs. Il gère les propriétés :only et :except pour vous permettre de gérer finement les inclusions. Bien que ce plugin soit très souple, il ne me convient pas puisqu'il lie très fortement les vues (les fichiers CSS et JavaScript) aux contrôleurs. Il ne respecte donc pas les principes de séparation des couches du modèle MVC.
La solution que j'ai retenu repose sur des méthodes standards de Rails : content_for et yeld. La méthode content_for permet de spécifier un bloc qui sera stocké pour être ensuite affiché par la méthode yeld. Vous comprenez aisément que ces méthodes peuvent être mises en oeuvre pour intégrer vos fichiers JavaScript et CSS en respectant les principes DRY et MVC.
Pratiquement, insérons un appel à yeld entre les balises <head> de notre layout :
<head>
<%= stylesheet_link_tag 'demo' %>
<%= yield "page_header" %>
</head>
Puis dans les vues où vous avez besoin d'utiliser des fichiers CSS ou JavaScript spécifiques, il ne vous plus qu'à utiliser le code suivant :
<% content_for("page_header") do %>
<%= stylesheet_link_tag 'monfichier.css' %>
<%= javascript_include_tag 'monfichier.js' %>
<% end %>
Cette méthode est bien sure réutilisable dans beaucoup d'autres situations !
Ce contenu a été réalisé par le blog accolade.ch (Raphaël Emourgeon) sous licence Creative Commons.