web-dev-qa-db-ja.com

Ruby on Rails 4：JavascriptファイルをRails Webアプリケーションに含める方法？

Rails 4 Webアプリケーションを構築しています。アプリケーションにいくつかの.jsファイルを含めたいと思います。JavaScriptファイルを直接Rails ..app/assets/javascriptsフォルダとapplication.jsの参照の追加

//= customejsfile.js

これは正しい方法ですか？はいの場合、jQueryとBootstrapライブラリを追加する際に同じ手順を実行できますか？

どんな助けも大歓迎です。

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

ファイルを含める正しい方法は次のとおりです。

//= require customejsfile

application.jsファイル内。さらに、デフォルトであなたが持っている

//= require_tree .

assets/javascriptパスのすべてのjsファイルが必要なので、自分で入力する必要はありません（入力する必要はありません。そうしないと、ファイルが2回インクルードされます）。 jQueryライブラリーはデフォルトで含まれています（jQuery gemから提供されます）。ブートストラップが必要な場合は、この方法で行うか、または bootstrap-generators または Twitter-bootstrap-Rails のような既存のgemのいずれかを使用できます。

31
Marek Lipka

Application.html.erbファイルを見ると、application.jsが以下を介して参照されていることがわかります。

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

そのため、この課題が発生したときに、カスタムJavaScriptを参照したいファイルにこのスクリプトを追加しましたが、今回はパラメーターを変更しました。だから、「アプリケーション」の代わりに、私はこれを持っています：

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

お役に立てれば。

8
anosikeosifo

Application.jsにjqueryとbootstrapを明示的に追加する必要がありますが、ディレクトリツリーを必要とするカスタムファイルは自動的に含まれます。application.jsを見ると、これは、bootstrapとjqueryでapplication.jsがどのように見えるかです

// 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 .

このリストにカスタムファイルを追加する必要はありません。最後のディレクティブ（require tree .）

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

javascript_include_tagを使用したくない場合も正常に動作します

0
Daniel Ortin