在不同的控制器中加载不同的布局时，样式表损坏 [英] The stylesheet broken when loading different layout in different controllers
问题描述
我遇到了一个奇怪的问题.
Hi I got a strange problem.
当我单击以下三个图像中显示的三个页面时
When I clicked three pages shown in the following three images
第1步 控制器欢迎
第2步 其他控制器
第3步，返回到step1视图 控制器欢迎
最后一张图片，
当我从other controllers回到controller welcome时
，即第2步到第3步.
The last image,
when I back to controller welcome from the other controllers
,that is step 2 to step 3.
样式表是由浏览器缓存的，
The stylesheets were cached by the browser,
步骤3的布局与 step1 布局不同.
但是它们是同一页，怎么可能，似乎浏览器缓存了css文件?
But they are the same page,How could it be, it seems the browser caches the css files ?
我在application.rb中添加了两个布局使用的两个资产文件夹
config.assets.paths<< #{Rails.root}/vendor/themes"
I add two assets folder used by the two layouts, in application.rb
config.assets.paths << "#{Rails.root}/vendor/themes"
themes
├── ace-admin-theme
│ ├── avatars
│ ├── css
│ ├── font
│ ├── images
│ ├── img
│ └── js
└── lenord-single-page-theme
├── css
├── fonts
├── img
├── index.html
├── js
└── rs-assets
在layouts文件夹下添加了welcome.html.haml，以便welcome_controller可以加载此布局
Added the welcome.html.haml under layouts folder, so that welcome_controller can load this layout
layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml
我在此处放置的所有源代码 https://gist.github.com/poc7667/0198b973fce0fbf4dd26
All the source code I put here https://gist.github.com/poc7667/0198b973fce0fbf4dd26
A页:确定 B页:确定 页面A:失败，页面B的样式表已缓存，应与原始页面A相同
当我为CSS注释data-turbolinks-track时，它不起作用
It didn't work when I comment the data-turbolinks-track for the css
奇怪的现象仍然发生.
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,7 +2,7 @@
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
/ Description, Keywords and Author
/ basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
@@ -2,7 +2,7 @@
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
我打开萤火虫以查看随附的CSS文件， 我发现我需要重新加载页面才能加载预期的CSS文件. 如何解决?
I open the firebug to see the included css files, I found I need to reload the page to load the expected css files. How to fix it ?
当我重新加载页面时，控制台显示那些css文件已加载
When I reload page, the console showed those css files were loaded
Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
当我单击超链接(通过url助手)到其他页面时，css将不会再次加载.
When I click a hyperlink(by url helper) to other pages the css won't be load again.
但是实际上，它应该再次加载css文件，因为某些控制器使用不同的布局和资源.
But actually it should load the css files again, because some controllers use the different layout and assets.
但是更糟糕的是，如果我单击链接(由URLhelper生成)，则会发生问题
But if I go to the page by typing the URL on the browser manually, it works fine!!
But what's the worse is that if I click the link (generated by URLhelper) the problems happens
But if I go to the page by typing the URL on the browser manually, it works fine!!
简而言之，css文件仅在第一次加载，而其他必需的css文件(用于其他布局)将不再加载.(如果我通过单击URLHelperLink查看页面)，但是可以手动进行在浏览器上输入URL(例如:localhost:3000/welcome，localhost:3000/urlcommands)
To brief, the css files only load in the first time, and other necessary css files(for other layout) won't be load anymore.(If I view the page by clicking the URLHelperLink), but it works by manually type the URL on the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands)
推荐答案
How could it be, it seems the browser caches the css files ?
涡轮链接
如果您使用的是 Turbolinks -会加载新版本的<body>标记(保留<head>).这将使您的浏览器在每个请求(触发turbolinks的地方)使用相同的CSS，仅当您使用相同的layout
That might appear to be the case if you're using Turbolinks - which loads a new version of the <body> tag (leaving <head>). This would make your browser use the same CSS each request (where turbolinks is firing) problem would only be present if you're using the same layout
这可能不是问题(如果您要更改布局，则整个页面都会刷新)
This may not be the problem (if you're changing layouts, the entire page will refresh)
一种测试方法是关闭涡轮链接:
A way to test this is to turn off turbolinks:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>
如果这样做，Rails应该每次刷新整个页面.这将使您查看样式是否每次都会更改
If you do this, Rails should refresh your whole page every time. This will allow you to see whether the styling will change each time
CSS
您可能遇到的另一个问题是如何调用CSS.如果第3步的布局不同-您是否要调用其他CSS?
The other issue you may have is how you're calling your CSS. If you've got a different layout for step 3 - are you calling different CSS?
就个人而言，我只是将不同的样式用于不同的步骤&将它们合并到同一电子表格中.
Personally, I would just use different styling for the different steps & incorporate them into the same spreadsheet.
这就是我要使用SASS进行的操作:
Here's how I'd do it with SASS:
#app/assets/stylesheets/application.css.sass
.service
.step1
//styling
.step2
//styling
.step3
//styling
更新
我会说这里的问题很可能是您使用Turbolinks编写的代码的结构.我90％确信问题将出在Turbolinks上(尤其是当您写信给您需要刷新"文档以使CSS正常工作时)
I would say the issue here is likely to be your structure of your code with Turbolinks. I'm 90% sure the issue will be with Turbolinks (especially as you wrote you "need to refresh" the doc to make the CSS work)
您可以共享您的布局吗?您如何在控制器中调用它们?
Can you share your layouts & how you're calling them in your controllers?
这篇关于在不同的控制器中加载不同的布局时，样式表损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
