简体   繁体   English

在Ruby on Rails 4项目中实现页面特定的Java脚本和CSS

[英]Implementing page specific java script and CSS in a ruby on rails 4 project

My project has two pages and each page has different javascript and CSS. 我的项目有两个页面,每个页面都有不同的javascript和CSS。 I'm new to ruby on rails as well and I sort of understand the asset pipeline but not fully. 我也是Ruby的新手,我有点了解资产管道,但并不完全。 There are a couple of things that I have tried so far that have not worked. 到目前为止,我尝试了几项没有成功的事情。

The first was creating javascript in its own file and then inside of the .html.erb file in which I wanted that javascript to load in I create a javascript link tag between <head> tags. 首先是在自己的文件中创建javascript,然后在要加载该javascript的.html.erb文件中,我在<head>标签之间创建了javascript链接标签。 Along with that I pre-compiled them in the production.rb file. 与此同时,我将它们预编译在production.rb文件中。 This did not work and it seemed like their was still overlapping between the two javascript files. 这没有用,似乎它们在两个javascript文件之间仍然重叠。

The next solution that I tried was to implement a jquery-readyselector plugin . 我尝试的下一个解决方案是实现jquery-readyselector插件 This involved creating a class on the body in application.html.erb like this 这涉及像这样在application.html.erb中的主体上创建一个类

<body class="<%= controller_name %> <%= action_name %>">
  <%= yield %>
</body>`

You would then include the ready selector in your application.js and finally you would scope your javascript to the page in that javascript/coffeescript file. 然后,您将在您的application.js中包含ready选择器,最后将您的javascript范围限定为该javascript / coffeescript文件中的页面。

// app/assets/javascripts/alert.js.coffee

$(".pages.contact").ready ->
  alert "My example alert box."

This solution didn't work either. 该解决方案也不起作用。 I don't know what I am doing wrong and it is probably something simple that I am overlooking because i'm a rails noob. 我不知道自己在做什么错,这很容易被我忽略,因为我是Rails新手。 I was wondering if someone could give me some guidance on another method to allow for page specific javascript and CSS in my ruby on rails project. 我想知道是否有人可以给我一些指导,以便在我的ruby on rails项目中允许页面特定的javascript和CSS。

Below in my application.{js|css} files 在我的应用程序下面。{js | css}文件

application.js
//= require jquery
//= require jquery_ujs
//= require moment
//= require bootstrap-datetimepicker
//= require template
//= require form

application.css
*= require_self
 *= require bootstrap-datetimepicker
 *= require template
 *= requre form
 *= require_tree .

There are a few different ways you can approach this. 您可以通过几种不同的方法来解决此问题。

By default in a Rails project your application.js will be included. 默认情况下,在Rails项目中将包含application.js

If you've just started your project, you can probably see it being included in app/views/layouts/application.html.erb using something like javascript_include_tag 'application' 如果您刚刚开始项目,则可能会使用javascript_include_tag 'application'类的内容将其包含在app/views/layouts/application.html.erb

Depending on how much JS you have for your page specific file, you could just require it in application.js, but if you want to serve up totally different JS, you can do something like this in the layout file mentioned above: 根据页面专用文件的JS数量,可以在application.js中要求它,但是如果要提供完全不同的JS,则可以在上述布局文件中执行以下操作:

<% if content_for?(:page_script_tags) %>
  <%= yield(:page_script_tags) %>
<% else %>
  <%= javascript_include_tag('application') %>
<% end %>

And then in any page's HTML where you want custom JS, you can do: 然后,在要自定义JS的任何页面的HTML中,您可以执行以下操作:

<% content_for(:page_script_tags, javascript_include_tag('path/to/your/js/file.js') %>

If you just want to change your JS so that it only executes on the specific page, you could just update your JS to: 如果您只想更改JS,使其仅在特定页面上执行,则可以将JS更新为:

jQuery ->
  if ($(".pages.contact").length) 
    alert "My example alert box."

Let me know if this makes sense! 让我知道这是否有意义!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM