在Rails中包含特定于页面的Javascript的正确方法

我想包括这个,例如:

jQuery(document).ready(function($) { $('#my-modal').modal(options) }); 

在rails应用程序中的一个特定位置。 在我的例子中,该文件名为views / modals / mymodal.html.erb。 那里只有那里。

如果不把它放在所有页面上,如果我把它放在资产中就会发生,我无法弄清楚如何做到这一点。 谢谢!

这些是一些有用的技巧

#1带文件js

  • 为您的javascript创建文件your.js
  • 在特定的布局上调用文件your.js
  • 删除//= require_tree .application.js
  • on config/application.rb上将your.js添加到资产percompile: config.assets.precompile += %w( your.js )

#2放入特定文件非布局(不推荐)

mymodal.html.erb上使用javascript标记放置你的js脚本


#3使用if..else ..

将您的js脚本放入layout/yourlayout.html.erb并使用if.. else.. logic。

例子:

  <% if current_page?(yourspecific_path) %>  <% end %> 

在这里阅读更多关于current_page?

或者使用request.fullpath获取当前的完整路径

例子:

  <% if request.fullpath == yourspecific_path %>  <% end %> 

在这里阅读更多关于request.fullpath

如果您希望将脚本放入文件.js也可以组合#1和#3

干杯

其中一个解决方案是将我们的javascript插入到自己的文件中: Reference Link

例如 :

// app / assets / javascripts / alert.js

 alert("My example alert box."); 

并且只在我们希望它执行的视图中包含此文件:

 <%# app/views/page/contact.html.erb %> <%= javascript_include_tag "alert" %> 

Contact

This is the contact page

并且不要忘记将新文件包含在要编译的文件列表中:

 # config/environments/production.rb config.assets.precompile += %w( alert.js ) 

给定要包含的JS文件名为my_modal.js

  1. 将放置在assets/javascripts中的JS文件放在assets/javascripts内的某个目录中,例如application

  2. 更改行//= require_tree . 在您的application.js //= require_tree application application.js (它阻止在每个页面上加载my_modal.js )。

  3. my_modal.js放在assets/javasctripts

  4. my_modal.js添加到config.assets.precompile数组( config assets.precompile += ['my_modal.js'] )。

  5. javascript_include_tag 'my_modal'要包含此文件的视图中

您可以访问Rails指南以供参考。

晚会,但对于今天看到这个的人,我想我已经想出了更好的东西。

Punchbox Gem for Rails

有了这个,您可以编写如下代码:

 class Post { controller() { // Runs on every action } index() { // Runs on just the index action } } Punchbox.on('Posts', Post); 

(您也可以创建一个对象而不是一个类。请参阅文档)

我在这里更深入地写了这篇文章: https : //kierancodes.com/blog/page-specific-javascript-in-rails-4

jquery-readyselector是一个“扩展$().ready()的插件,为页面特定的脚本提供方便的语法”

  1. 安装jquery-readyselector

  2. 创建一些CSS类

      
  3. 将您的JavaScript范围扩展到您的页面

     $("#my-modal").ready(function() { $('#my-modal').modal(options) }); 

回答更多信息如何加载页面特定的rails 4 js文件?