Intégrer vos fichiers javascripts et CSS par vue ou partial dans Rails
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 javascripts 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 à mon avis des gros inconvénients puisque si vous souhaitez inclure 2 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).
Needy controllers est un autre plugin qui vous permet de spécifier les fichiers javascripts 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 javascripts 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 ou 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 sûr réutilisable dans beaucoup d’autres situations !


