158 votes

Meilleur moyen d'ajouter du JavaScript spécifique à une page dans une application Rails 3 ?

Rails 3 propose un JavaScript discret, ce qui est plutôt cool.

Mais je me demandais quelle était la meilleure façon d'inclure du JavaScript supplémentaire pour une page particulière.

Par exemple, là où j'ai pu faire précédemment :

<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>

Nous pouvons maintenant le rendre discret avec quelque chose comme

<%= f.radio_button :rating, 'positive' %>

# then in some other file
$('user_rating_positive').click(function() {
  $('some_div').show();
}

Je suppose donc que ma question est de savoir où/comment inclure ce JavaScript ? Je ne veux pas remplir le application.js car ce JavaScript n'est applicable qu'à cette seule vue. Dois-je inclure un fichier JavaScript personnalisé pour chaque page, ou le placer dans une variable d'instance que l'en-tête recherche ?

152voto

bjg Points 6448

Ce que j'aime faire, c'est inclure le Javascript par vue dans une section content_for :head et ensuite yield à ce bloc dans la mise en page de votre application. Par exemple

Si c'est assez court alors :

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

ou, si elle est plus longue, alors :

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

Ensuite, dans votre fichier de mise en page

<head>
  ...
  <%= yield :head %>
</head>

103voto

Kenny Grant Points 2078

Si vous voulez inclure le javascript sur une seule page, vous pouvez l'inclure sur la page en ligne bien sûr, mais si vous voulez regrouper votre javascript et profiter du pipeline d'actifs, du js minifié, etc., il est possible de le faire et d'avoir des actifs js supplémentaires qui sont combinés et chargés uniquement sur des pages spécifiques en divisant votre js en groupes qui ne s'appliquent qu'à certains contrôleurs/vues/sections du site.

Déplacez vos actifs js dans des dossiers, avec un fichier manifeste distinct pour chacun d'entre eux. Ainsi, si vous avez une bibliothèque js d'administration qui n'est utilisée que sur le backend, vous pouvez procéder ainsi :

  • actifs
    • javascripts
      • admin
        • ...js
      • admin.js (manifeste pour le groupe administrateur)
      • application.js (manifeste pour le groupe global de l'application)
      • mondial
        • ...js

dans l'application.js existante

//= require jquery
//= require jquery_ujs
//= require_tree ./global // requires all js files in global folder

dans un nouveau fichier manifeste admin.js

//= require_tree ./admin // requires all js files in admin folder

Assurez-vous que ce nouveau manifeste js est chargé en éditant config/production.rb

config.assets.precompile += %w( admin.js )

Ajustez ensuite votre mise en page de manière à pouvoir inclure quelques js supplémentaires pour l'en-tête de page :

<%= content_for :header %>   

Ensuite, dans les vues où vous voulez inclure ce groupe de js spécifique (ainsi que le groupe d'application normal) et/ou tout js, css, etc. spécifique à la page :

<% content_for :header do %>
  <%= javascript_include_tag 'admin' %>  
<% end %>

Vous pouvez bien sûr faire la même chose avec les css et les regrouper de manière similaire pour les appliquer uniquement à certaines zones du site.

12voto

cailinanne Points 4737

Je préfère ce qui suit...

Dans votre fichier application_helper.rb

def include_javascript (file)
    s = " <script type=\"text/javascript\">" + render(:file => file) + "</script>"
    content_for(:head, raw(s))
end

et ensuite dans votre vue particulière (app/views/books/index.html.erb dans cet exemple)

<% include_javascript 'books/index.js' %>

... semble fonctionner pour moi.

12voto

Maximus S Points 873

Ces réponses m'ont beaucoup aidé ! Si quelqu'un veut en savoir un peu plus...

  1. Vous devez mettre les javascripts dans les manifestes si vous voulez qu'ils soient précompilés. Cependant, si vous exigez chaque fichier javascript de application.js.coffee alors tous les javacsripts seront chargés à chaque fois que vous naviguerez vers une autre page, et l'objectif de faire des javascripts spécifiques à une page sera vain.

Par conséquent, vous devez créer votre propre fichier manifeste (par ex. speciifc.js ) qui nécessitera tous les fichiers javascript spécifiques à la page. De plus, modifiez require_tree de application.js

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global

app/assets/javascripts/specific.js

//= require_tree ./specific

Alors dans votre environments/production.rb ajouter ce manifeste à la liste précompilée avec l'option config,

config.assets.precompile += %w( specific.js )

C'est fait ! Tous les partagé les javascripts qui devraient toujours être chargés seront placés dans app/assets/javascripts/global et les javascripts spécifiques à la page dans le dossier app/assets/javascripts/specific . Vous pouvez simplement appeler les javascripts spécifiques à la page à partir de la vue, comme suit

<%= javascript_include_tag "specific/whatever.js" %> //.js est facultatif.

C'est suffisant, mais je voulais faire une utilisation de javascript_include_tag params[:controller] aussi. Lorsque vous créez des contrôleurs, un fichier coffeescript associé est généré en app/assets/javascripts comme d'autres personnes l'ont mentionné. Il y a vraiment spécifique au contrôleur javascripts, qui ne sont chargés que lorsque l'utilisateur atteint la vue spécifique du contrôleur.

J'ai donc créé un autre manifeste controller-specific.js

app/assets/javascripts/controller-specific.js

//= require_directory .

Cela comprendra tous les coffeescripts générés automatiquement et associés aux contrôleurs. Vous devez également l'ajouter à la liste des éléments précompilés.

config.assets.precompile += %w( specific.js controller-specific.js )

9voto

AJP Points 2645

Si vous ne souhaitez pas utiliser le pipeline d'actifs ou la fonction des contournements complexes pour obtenir ce javascript spécifique à la page (je compatis), le moyen le plus simple et le plus robuste, qui permet d'obtenir les mêmes résultats que les réponses ci-dessus, mais avec moins de code, est d'utiliser :

<%= javascript_include_tag "my_javascipt_file" %>

Remarque : cela nécessite une requête http de plus par balise include que les réponses qui utilisent content_for :head

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X