Ruby on Rails與Turbolinks的CSS/JS錯誤

我正在ROR5上構建一個Web應用程序，並且佈局/設計全部完成，CSS/JS文件已完成。但是，當我打開應用程序，點擊一個鏈接，瀏覽網站，CSS無法加載。更具體地說，CSS全部搞砸了。例如，假設我從'首頁' - >'頁面A'，然後如果我再次退格到'首頁'（或點擊徽標導航到'主頁'），則'主頁'頁面將會混亂。只有當我刷新的頁面，我纔會得到正確的顯示。Ruby on Rails與Turbolinks的CSS/JS錯誤

起初我還以爲這是一個緩存的問題，但很快就發現，這條線是造成問題：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

當我刪除這條線，顯示問題已經不再存在。但是，所有JS效果/基於JS的插件都無法工作。我有一個文本編輯器，幾個jQuery動畫和標籤導航，當我刪除該行時，這些都不起作用。 +當然，我並不是簡單地刪除該行，而是試着簡單地禁用turbolinks： <％= javascript_include_tag'application'％> 並從我的Gemfile中刪除turbolinks。這也沒有奏效。

我的Gemfile包括：寶石 'turbolinks'， '〜> 5' 寶石 '咖啡軌'， '〜> 4.2' 寶石 'jQuery的軌道'

，其餘寶石我前端的所有標準寶石（bootstrap，SASS，字體真棒等）。

我的application.js看起來是這樣的：

//= require rails-ujs 
//= require jquery 
//= require jquery_ujs 
//= require tinymce 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree .

以供參考，我application.html.erb包含一個類似如下：

<head> 
    <title>..</title> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag 'application', media: 'all' %> 
    <%= stylesheet_link_tag params[:controller] %> 

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Adobe Typekit Scripts --> 
    <script src="https://use.typekit.net/ovy4zfg.js"></script> 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 
</head>

可能是什麼問題？謝謝。

來源

2017-06-21 sofarsophie

我認爲這裏的問題是你正在加載控制器特定的樣式表（<%= stylesheet_link_tag params[:controller] %>）。 Turbolinks將追加新的樣式表，但不會刪除後續頁面加載中不存在的樣式表。因此，這裏的流量：

用戶訪問首頁
樣式爲主頁的加載器
用戶訪問網頁一個
樣式爲家庭CSS
首頁CSS加載後頁面A的控制器和Page A CSS將保留在head

如果可能，將所有CSS包含在application.css清單文件中。如果你有一些特定的控制器的樣式，嘗試添加一個類的身體，例如：

<body class="<%= controller_name %>">

然後你可以範圍的樣式，例如對於pages_controller：

body.pages { … }

或者你可以添加data-turbolinks-track="reload"你的CSS鏈接標籤：

<%= stylesheet_link_tag params[:controller], 'data-turbolinks-track': 'reload' %>

然而，這將意味着使用該網頁間導航時，你只會得到Turbolinks的好處同一控制器。在使用不同控制器的頁面之間導航時，您將獲得整頁加載。這是因爲Turbolinks會跟蹤CSS的存在或不存在，如果它發生了變化，就會重新加載。

最後一件事：將'data-turbolinks-track': 'reload'添加到application.css通常是一個好主意，這樣如果您發佈新版本的CSS，則當更改發佈時，網站上的用戶將會是最新的生活。

希望有幫助

來源

2017-06-21 08:47:25

謝謝！我有很多樣式的工作，所以我使用了替代方法，並添加了data-turbolinks-track =「reload」到我的CSS鏈接標籤，完美地完成了這項工作！ :) – sofarsophie

Ruby on Rails與Turbolinks的CSS/JS錯誤

回答

相關問題