CSS和JS无法在Rails的一个控制器ruby中以两个动作加载
[英]CSS and JS not loading with two actions in one controller ruby on rails
问题描述
An index.html.erb page from index action in home controller loads fine with all the css and js linked in the view ie .html.erb but when another action is called in the same page via 'link_to', all the js and css is lost. 
来自home控制器中index动作的index.html.erb页面可以很好地加载视图中链接的所有css和js，即.html.erb，但是当通过'link_to'在同一页面中调用另一个动作时，所有js和css迷路了。 Even though the same links to css and js are available in the new action for ex: contact.html.erb view is called for the 'contact' action in home controller. 即使在ex的新操作中可以使用相同的css和js链接，对于home控制器中的“ contact”操作，也会调用contact.html.erb视图。
How to use the css and js for all the actions in a controller? 如何将css和js用于控制器中的所有动作？ Sorry for the naivety as I have just started with RoR. 很抱歉，因为我刚开始使用RoR。
class HomeController < ApplicationController
def index
end
def contact
end
def generic
end
def elements
end
end
<!--"Application.html.erb"-->
<!DOCTYPE html>
<html>
<head>
<title>MiniProject</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script src="js/ie/html5shiv.js"></script>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/ie8.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<header id="header" class="alt">
<h1><a href="index.html">Make</a>My Ride</h1>
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#" class="icon fa-angle-down">Layouts</a>
<ul>
<li><%= link_to "Generic", home_generic_path%></li>
<li><%= link_to "Contact", home_contact_path%></li>
<li><%= link_to "Elements", home_elements_path%></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
<li><a href="#">Option Four</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="button">Sign Up</a></li>
</ul>
</nav>
</header>
<body>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/jquery.scrollgress.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="js/main.js"></script>
</body>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-google-plus"><span class="label">Google+</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</html>
<!--"Index.html.erb"-->
<html>
<body class="landing">
<div id="page-wrapper">
<!-- Banner -->
<section id="banner">
<h2>Alpha</h2>
<p>Another fine responsive site template freebie by HTML5 UP.</p>
<ul class="actions">
<li><a href="#" class="button special">Sign Up</a></li>
<li><a href="#" class="button">Learn More</a></li>
</ul>
</section>
<!-- Main -->
<section id="main" class="container">
<section class="box special">
<header class="major">
<h2>Introducing the ultimate mobile app
<br />
for doing stuff with your phone</h2>
<p>Blandit varius ut praesent nascetur eu penatibus nisi risus faucibus nunc ornare<br />
adipiscing nunc adipiscing. Condimentum turpis massa.</p>
</header>
<span class="image featured"><img src="images/pic01.jpg" alt="" /></span>
</section>
<section class="box special features">
<div class="features-row">
<section>
<span class="icon major fa-bolt accent2"></span>
<h3>Magna etiam</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
</section>
<section>
<span class="icon major fa-area-chart accent3"></span>
<h3>Ipsum dolor</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
</section>
</div>
<div class="features-row">
<section>
<span class="icon major fa-cloud accent4"></span>
<h3>Sed feugiat</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
</section>
<section>
<span class="icon major fa-lock accent5"></span>
<h3>Enim phasellus</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
</section>
</div>
</section>
<div class="row">
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic02.jpg" alt="" /></span>
<h3>Sed lorem adipiscing</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</section>
</div>
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic03.jpg" alt="" /></span>
<h3>Accumsan integer</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn More</a></li>
</ul>
</section>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta">
<h2>Sign up for beta access</h2>
<p>Blandit varius ut praesent nascetur eu penatibus nisi risus faucibus nunc.</p>
<form>
<div class="row uniform 50%">
<div class="8u 12u(mobilep)">
<input type="email" name="email" id="email" placeholder="Email Address" />
</div>
<div class="4u 12u(mobilep)">
<input type="submit" value="Sign Up" class="fit" />
</div>
</div>
</form>
</section>
</div>
</body>
</html>
<!--"Contact.html.erb"-->
<html>
<body>
<div id="page-wrapper">
<!-- Main -->
<section id="main" class="container 75%">
<header>
<h2>Contact Us</h2>
<p>Tell us what you think about our little operation.</p>
</header>
<div class="box">
<form method="post" action="#">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<input type="text" name="subject" id="subject" value="" placeholder="Subject" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
</div>
</section>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2015-11-09 06:50:15
我通过在application.html.erb / home.html.erb中使用stylesheet_link_tag和javascript_include_tag解决了此问题，因为它包括了不同的资产，而不是使用html的方式来包括它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
纯CSS无法正确在Ruby on Rails中加载 - Pure css not loading in Ruby on Rails correctly
Ruby on Rails CSS无法通过资产管道加载 - Ruby on Rails CSS not loading via assets pipeline
两个动作一个 onClick-React.js - Two Actions With One onClick-React.js
在视图中加载CSS时为什么不更改布局？ - ruby on rails Why is the layout not being changed while loading css in view?
一页中加载两个js函数 - two js function loading in one page
一种形式的两种动作 - Two actions with one form
Ruby on Rails CSS行为 - ruby on rails css behaviour
ruby on rails - CSS for partial - ruby on rails - CSS for a partial
CSS没有加载在轨道上 - css not loading on rails
一键两个不同的动作 - one button two different actions
相关标签