web-dev-qa-db-fra.com

Ruby on Rails 4: Comment inclure des fichiers Javascript dans Rails application web?)

Je construis une application Web Rails 4 et je souhaite inclure des fichiers .js dans mon application. Est-il possible d'ajouter directement un fichier JavaScript à mon Rails ..app/assets/javascripts dossier et ajouter une référence dans application.js comme ceci?

//= customejsfile.js

Est-ce la bonne façon? Si oui, est-il possible pour moi de suivre les mêmes étapes lors de l'ajout de jQuery et de la bibliothèque Bootstrap?

Toute aide est appréciée.

javascriptjqueryruby-on-railstwitter-bootstrapruby-on-rails-4
21
Cyber

La bonne façon d'inclure vos fichiers est:

//= require customejsfile

dans votre application.js fichier. De plus, par défaut, vous avez

//= require_tree .

qui nécessite tous les fichiers js de assets/javascript chemin, vous n'avez donc pas besoin de le taper vous-même (et vous ne devriez pas, sinon vous aurez votre fichier inclus deux fois). La bibliothèque JQuery est incluse par défaut (et elle provient de la gemme jQuery). Si vous voulez Bootstrap, vous pouvez le faire de cette façon ou utiliser l'un des joyaux existants, comme bootstrap-generators ou Twitter-bootstrap-Rails .

31
Marek Lipka

En jetant un œil au fichier application.html.erb, vous verrez que le fichier application.js a été référencé via:

<%= javascript_include_tag "application", "data-turbolinks-track" => true  %>

Donc, quand j'ai eu ce défi, ce que j'ai fait était: ajouter ce script dans le fichier où je voulais référencer mon javascript personnalisé, mais cette fois j'ai modifié le paramètre. Donc, au lieu de "application", j'ai ceci:

<%= javascript_include_tag "customjsFile", "data-turbolinks-track" => true  %>

J'espère que cela t'aides.

8
anosikeosifo

Vous devez ajouter explicitement jquery et bootstrap dans application.js, alors que vous inclurez automatiquement les fichiers personnalisés nécessitant l'arborescence de répertoires. Si vous jetez un œil à votre application.js, il devrait y avoir un dicton manifeste Voilà à quoi devrait ressembler votre application.js avec bootstrap et jquery

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
//= require turbolinks
//= require_tree .

Pas besoin d'ajouter votre fichier personnalisé dans cette liste car vous avez besoin de tous les fichiers au même niveau de votre application.js (ou plus bas dans l'arborescence des répertoires) avec la dernière directive (require tree .)

4
sissy
<script src="<%= asset_path 'my_js_file' %>"></script>

Fonctionne très bien aussi si vous ne voulez pas utiliser javascript_include_tag

0
Daniel Ortin