blocks|key|4650281|text|您必须显式地在application.js中添加jquery和bootstrap，而您将自动包含需要目录树的自定义文件。如果你看一下你的application.js，应该会有这样的声明。这就是使用bootstrap和jquery时application.js应该是什么样子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4650282|//+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+.|code-block|syntax|javascript|4650283|不需要在此列表中添加自定义文件，因为您需要与最后一条指令(require+tree+.)处于application.js相同级别(或目录树中更低级别)的所有文件|offset|length|style|CODE|4650284|entityMap^0|0|0|T|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You have to explicitly add jquery and bootstrap in application.js, whereas you will automatically include custom files requiring the directory tree.
If you take a look at your application.js there should be a manifest saying that. This is how your application.js should look like with bootstrap and jquery</p>

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

<p>No need to add your custom file in this list as you are requiring all the files at the same level of your application.js (or lower in the directory tree) with the last directive (<code>require tree .</code>)</p>


blocks|key|4650305|text|包含文件的正确方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4650306|//=+require+customejsfile|code-block|syntax|javascript|4650307|在您的application.js文件中。更重要的是，默认情况下你有|offset|length|style|CODE|4650308|//=+require_tree+.|4650309|它需要assets/javascript路径中的所有js文件，所以您不必自己键入(您也不应该这样做，否则您的文件将包含两次)。默认情况下包含JQuery库(它来自jQuery+gem)。如果你想要Bootstrap，那么你可以这样做，或者使用现有的gem之一，如bootstrap-generators或twitter-bootstrap-rails。|4650310|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/decioferreira/bootstrap-generators|1|https://github.com/seyhunak/twitter-bootstrap-rails^0|0|0|3|E|0|0|3|H|3N|K|0|48|N|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@$I|17|J|18|K|L]]|9|@$I|19|J|1A|1|1B]|$I|1C|J|1D|1|1E]]|A|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>The right way to include your files is:</p>

<pre><code>//= require customejsfile
</code></pre>

<p>in your <code>application.js</code> file. What's more, by default you have </p>

<pre><code>//= require_tree .
</code></pre>

<p>which requires all js files from <code>assets/javascript</code> path, so you don't have to type it on your own (and you shouldn't, or you'll have your file included twice). JQuery library is included by default (and it comes from jQuery gem). If you want Bootstrap, then you can do it this way or use one of existing gems, like <a href="https://github.com/decioferreira/bootstrap-generators">bootstrap-generators</a> or <a href="https://github.com/seyhunak/twitter-bootstrap-rails">twitter-bootstrap-rails</a>.</p>


blocks|key|4650344|text|查看application.html.erb文件，您将看到该application.js是通过以下方式引用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4650345|<%25=+javascript_include_tag+"application",+"data-turbolinks-track"+=>+true++%25>|code-block|syntax|javascript|4650346|因此，当我遇到这个挑战时，我所做的是:将这个脚本添加到我想引用自定义javascript的文件中，但这次我修改了参数。因此，我没有使用“应用程序”，而是这样：|4650347|<%25=+javascript_include_tag+"customjsFile",+"data-turbolinks-track"+=>+true++%25>|4650348|希望这能有所帮助。|4650349|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Taking a look at the application.html.erb file, you'll see that the application.js was referenced via:</p>

<pre><code>&lt;%= javascript_include_tag "application", "data-turbolinks-track" =&gt; true  %&gt;
</code></pre>

<p>So when I had this challenge, what I did was: add this script in the file where I wanted to reference my custom javascript, but this time I modified the parameter. So instead of "application," I have this:</p>

<pre><code>&lt;%= javascript_include_tag "customjsFile", "data-turbolinks-track" =&gt; true  %&gt;
</code></pre>

<p>Hope this helps.</p>


blocks|key|4650374|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4650375|<script+src="<%25=+asset_path+'my_js_file'+%25>"></script>|code-block|syntax|javascript|4650376|4650377|如果您不想使用javascript_include_tag，也可以正常工作|offset|length|style|CODE|4650378|entityMap^0|0|0|0|7|M|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|S|8|@$J|T|K|U|L|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="&lt;%= asset_path 'my_js_file' %&gt;"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>Works fine also if you don't wanna use <code>javascript_include_tag</code></p>


<p>I am building a Rails 4 web application and I want to include some .js files into my application. Is it possible to directly add JavaScript file to my Rails <code>..app/assets/javascripts</code> folder and add reference in application.js like this?</p>

<pre><code>//= customejsfile.js 
</code></pre>

<p>Is this the right way? If yes, is it possible for me to follow the same steps in adding jQuery and Bootstrap library?</p>

<p>Any help is appreciated.</p>


Ruby on Rails 4: How to include Javascript files in Rails web application?

jQuery

我正在构建一个Rails4Web应用程序，我想在我的应用程序中包含一些.js文件。可以直接将JavaScript文件添加到我的Rails ..app/assets/javascripts文件夹中，然后在application.js中添加引用吗？//= customejsfile.js 这条路对吗？如果是，是否可以按照添...

问Ruby on Rails 4:如何在Rails web应用程序中包含Javascript文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ruby on Rails 4:如何在Rails web应用程序中包含Javascript文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ruby on Rails 4:如何在Rails web应用程序中包含Javascript文件？
EN