这个问题可能听起来类似于Rails turbolinks长请求不显示页面加载.
我最近开始使用新的Rails 4应用程序,它默认使用Turbolinks库 - 它很棒:让应用程序感觉更快/更快,但是我确实有一些页面比其他页面慢.
不幸的是,我找不到一个让浏览器显示默认加载指示器的好方法- 就像加载"常规"网页时一样.人们推荐不同的JavaScript解决方案,例如https://github.com/caarlos0/turbolinks_transitions.虽然有些看起来不错,但"平均互联网用户"并不习惯在默认浏览器的加载指示器以外的地方看到加载进度.
我的大多数页面都很快,所以我想为不会在300毫秒内加载的页面显示此加载指示器.
谢谢!亚历克斯.
我想仅在用户第一次登录时触发一些JS,并且只在第一次加载特定页面时触发.
我相信我可以通过简单的检查来处理他们第一次登录user.sign_in_count < 2,但我不知道如何仅在第一页加载时指定.
即我不希望在用户首次登录后触发JS并刷新页面而不注销.
我正在使用Turbolinks并$(document).on('turbolinks:load', function() {触发它.
编辑1
所以我要做的是在许多页面上执行Bootstrap Tour.但我只希望在第一页加载时自动执行该游览.游览本身将引导用户访问我的应用程序中的其他特定页面,但每个页面将在每个页面上具有特定于页面的游览JS.
现在,在我的HTML中我有这样的事情:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "#navbar-logo",
title: "Go Home",
content: "All throughout the app, you can click our logo to get back to the main page."
},
{
element: "input#top-search",
title: "Search",
content: "Here you can search for players by their …Bootstrap导航栏折叠菜单不与Turbolinks一起使用.
工作方案
在页面加载
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu"> </div>
单击菜单和下拉列表
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse in" id="menu" style="height: auto;"> </div>
再次单击菜单并折叠
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>
不工作(导航到任何页面后)
在页面加载
the same html, no need to repeat
单击菜单和下拉列表
the same html, no need to repeat
再次单击菜单并折叠
3.1.在调试器中观察到瞬态变化
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
<div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>
注意:class ="navbar-collapsing"和height:96px;
3.2.然后回到相同的状态 …
我刚从Rails 3.2.17升级到4.0.4,一切看起来都很棒.我从我创建的全新测试4.0.4应用程序中复制了很多配置文件.但是,当我将以下行添加到我的app/assets/javascripts/application.js文件时,我收到一个错误:
//= require turbolinks
错误是:
couldn't find file 'turbolinks'
(in /Users/scott/Code/ucode/app/assets/javascripts/application.js:15)
我想要turbolinks.我在Rails 4.0.4上.我的测试应用程序没有此错误.为什么我会收到此错误,如何解决？我还更新了我的app/views/layouts/application.html.erb文件,包括:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.2 turbolinks ruby-on-rails-4
我有一个带有行的html表和一个jQuery处理程序.
点击事件调用window.location.href会导致整页刷新.
我可以以某种方式手动调用turbolinks来获取页面吗？我应该使用PJAX吗？
谢谢
我已修改application.html.erb为使用控制器特定资产:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>My Application</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag params[:controller], 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag params[:controller], 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
... other html template ...
问题是,我安装了turbolinks.当我在同一个控制器中导航时,turbolinks可以工作.但当我切换到另一个控制器时,turbolinks将执行完全重新加载.有没有什么办法解决这一问题？
是否可以制作window.location.replace或window.location.href使用turbolinks,就像它是一个简单的链接？
我有一个通过javascript呈现的模态表单.该模型被称为书.
# controllers/books_controller.rb
def new
@book = Book.new
end
def create
@book = Book.find(params[:id])
@book.save
end
我没有使用新的和编辑html,而是使用coffeescript:
# views/new.js.coffee
CustomModal.open "<%= j render('books/modal_form', book: @book) %>"
-
# views/create.js.coffee
<% if @book.valid? %>
CustomModal.hide()
# Other callback scripts for showing alert, etc
<% else %>
# Script for showing errors in the modal
<% end %>
以及触发模态的链接:
= link_to "Create Book", new_book_path, remote: true
现在,我面临的问题是这个链接只是在书的列表页面上使用.因此,在创建图书时,js回调会触发警报并使用更改更新列表.
现在我必须在另一个页面中添加此按钮,其中没有列表,所以我需要一个不同的回调(无论哪个回调都没关系).
所以,我必须添加到create.js.coffee之类的东西:
# views/create.js.coffee
<% if @book.valid? %>
CustomModal.hide()
# if …我正在开发一个遗留应用程序，最近升级到 Rails 6.0.4。该应用程序使用sprockets, NOT webpacker。
现在我正试图离开turbolinks和进入turbo-rails。此应用程序中的 js 文件均使用 sprockets require 指令，例如：
//= require jquery3
//= require turbolinks
我似乎不知道如何将其应用到turbo-rails. 我已经安装了 gem 并删除了 Turbolinks，但我找到的所有文档都有类似import "@hotwired/turbo-rails".
我对前端的东西不是很了解，但我相信这是一个不同的（ES6？）语法。该应用程序目前已启用sprockets 3.7.2，我认为 sprockets 在版本 4 之前不支持 ES6。如果可能的话，我希望避免此升级触及更多依赖项...
是否可以//= require像我现在那样进行涡轮增压//= require turbolinks？
我有一个嵌套表单，其中嵌套表单项以主表单中的选择为条件。我将表格的嵌套部分放在涡轮框架中。我有手动链接来更新框架，如下所示：
\n<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>\n我想要现有的选择而不是链接，我必须在更改时动态重新加载该框架。
\n我发现了这个：https ://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441它给出了如下解决方案：
\nlet frame = querySelector(\xe2\x80\x98turbo-frame#your-frame\xe2\x80\x99)\nframe.src = \xe2\x80\x98/my/new/path\xe2\x80\x99\nframe.reload()\n我仍在寻找一种直接优雅的单线，例如onChange...VS 看起来像完整的刺激控制器等。
turbolinks ×10
javascript ×4
browser ×1
coffeescript ×1
jquery ×1
pjax ×1
ruby ×1
throbber ×1
web ×1