标签: turbolinks

我完全明白为什么 Turbolinks 5 很棒，如果您正在阅读它，您可能也会这样做，但我对它与其他脚本的糟糕表现感到非常沮丧。

迄今为止，还没有简单的解释（人类可读的）来展示如何以允许它们运行的​​方式包装现有的 jQuery 脚本。以这个为例： https: //github.com/Bttstrp/bootstrap-switch。写得很好，简单易懂。您将 js 和 css 加载到资产管道中并在某个页面上实例化它。

# view.html.erb
<input type="checkbox" class="switch"> switch button
<script type="text/javascript">
    $(".switch").bootstrapSwitch();
</script>

您转到 view.html，单击另一个页面，单击返回，您会看到两个按钮。

接下来，您花了 5 个小时寻找一种方法，让 Turbolinks 仅加载一次 bootstrapSwitch 实例（如果之前未加载）。好吧，即使你这样做了，功能也会消失。点击它不会起作用。

$(document).on("turbolinks:load", function()...将在每次 Turbolink 访问时加载它，目前，我可以让它工作并且不创建重复项的唯一方法是禁用 view.html 上的缓存

<%= content_for :head do %>
    <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

这感觉有点愚蠢。

我认为这一切都与使用幂等有关 - https://github.com/turbolinks/turbolinks#making-transformations-idempot但你实际上是如何做到这一点的？

有人可以以这个简单的插件为例，分享一个简单、优雅的解决方案来使其工作，然后我们可以用其他脚本重现它吗？

问题是如何使用turbolinks并且每个页面都有特定的元标记？

这是application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require dashboard
//= require turbolinks

这是应用程序布局视图:

<title><%= yield_or_default(:title) -%></title>
<meta name="description" content="<%= yield_or_default(:meta_desc) -%>">
<meta name="keywords" content="<%= yield_or_default(:meta_keywords) -%>">
<meta name="robots" content="<%= yield_or_default(:robots) -%>">
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

这是仪表板CoffeeScript:

jQuery ->
  $("#list_tags").html(list_tags())

list_tags = ->  
  "Title: \"" + $('title').text() + "\"<br />" +
  "Meta Description: \"" + $('meta[name=description]').attr('content') + "\"<br />" +
  "Meta Keywords: \"" + …

我正在使用Google可视化在嵌套在视图中的脚本标记中构建图表.当直接获取页面时,这种方法运行良好,但是当通过link_to帮助程序运行时,javascript不起作用.

我相信这与turbolinks有关,但是如下所示将JavaScript包装起来 page:load并没有什么不同.我已经确认关闭turbolinks确实解决了这个问题但是如果没有它,整个应用程序会明显变慢.

<script  type="text/javascript" charset="UTF-8">
    function resultstable () {
        google.load('visualization', '1', {packages:['table']});
          google.setOnLoadCallback(drawTable);
          function drawTable() {
           var data = new google.visualization.DataTable();
            data.addColumn('string', '');
            data.addColumn('number', 'Lot #');
            data.addColumn('string', 'Client');
            data.addColumn('boolean', 'Commercial');
            data.addColumn('string', 'Site');
            data.addColumn('string', 'Biological Classification');
            data.addColumn('string', 'Actions');
            data.addRows([
                <% @lots.each do |lot| %>
                    [
                    '<%= check_box_tag "lot_ids[]", lot.id %>', 
                    <%= lot.id.to_s %>, 
                    '<%= link_to Client.find(lot.client_id).org.to_s.humanize, client_path(lot.client_id) %>',
                    <%= lot.commercial %>,
                    '<%= lot.site %>',
                    '<%= lot.phylum.to_s + " " + lot.l_class.to_s + " " + lot.genus.to_s + …

当你回到带有turbolinks的页面时,Skrollr.js似乎停止了工作.如果您再次手动刷新页面或通过data-no-turbolink链接转到页面,它可以正常工作.

我试过用所有可能的方式调用函数,但仍然没有运气,主要是:

$(document).on('ready page:load', function () {
var s = skrollr.init(); 
});

$(document).on('ready page:change', function () {
    var s = skrollr.init(); 
    });

这里有一个类似的问题但是接受的答案是你应该禁用turbolinks.我想知道如何让skrollr在启用turbolink的情况下工作.

我有用于图像弹出效果的baguetteBox库的rails应用程序,但它只在页面刷新后才能正常工作.我知道它因为turbolinks所以我安装了jquery-turbolinks gem,但它仍然不起作用.//要求jquery.turbolinks在正确的位置.

  //
  //= require jquery
  //= require jquery.turbolinks
  //= require jquery_ujs
  //= require baguetteBox.min
  //= require turbolinks
  //= require_tree .

我在展示视图的底部有这段代码

<script>
   window.onload = function() {
   baguetteBox.run('.step_div');
   };
</script>

初始化脚本.

有任何想法吗？

调用Turbolinks.visit时有一个进度条.

我想手动显示和隐藏它(因为我的一些xhr请求有点长),是否可能？

(在Turbolinks 3中,有Turbolinks.ProgressBar.start();但它不是公共API,不再工作了)

想知道当您想将频道与正在查看的页面联系起来时，将 ActionCable 与 Turbolinks 结合使用的最佳实践是什么。

一个经典的例子，当然，如果你有一篇带有评论的文章——你怎么能只流式传输与查看的文章相关的那些评论，然后在查看不同的文章时订阅不同的频道？

我turbolinks:loaded在 JQuery上使用过事件，但不知道将它链接到什么。我想每次都重新订阅吗？不重新加载JS怎么可能？

我正在使用 Rails 4.2，我想向我的服务器发送一个 ajax 请求。但是请求总是失败并显示错误Turbolinks is not defined。我的 rails 控制台返回 200 ok 响应。我正在使用'jquery-turbolinks' gem。

提前致谢！

阿贾克斯

$.ajax({
  type: "PUT",
  url: "http://localhost:3000",
  data: xx,
  success: function(data){
     alert("success");
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
       alert("some error");
  }
});

控制器

  def upvote
     # code here
     @vote.save
     respond_to do |format|
       format.html { redirect_to :back }
       format.json { head :ok }
       format.js { head :ok }
     end
   end

我正在使用 Rails 4。我通过 Bootstrap 的自定义工具只为工具提示引入了 Bootstrap javascript 和 css 。

我注意到当我直接请求一个页面（输入 url 并按 Enter）时，工具提示 javascript 效果工作得很好。但是：如果我通过单击链接导航到该页面，或单击后退按钮转到带有工具提示的页面：工具提示效果不再有效。

我相信 turbolinks 把这个搞砸了，但经过多次尝试，我没有成功解决这个问题。从应用程序中删除 turbolinks 不是一种选择。

我这样称呼工具提示：

<a href="#" data-toggle="tooltip" title="Hooray for tooltips!"><i class="fa fa-question-circle" aria-hidden="true"></i></a>

这是相关的js文件：

资产/javascripts/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap_tooltip
//= require_self
//= require turbolinks

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

assets/javascripts/bootstrap_tooltip.js文件。

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*! …

使用Bootstrap工具提示时遇到一些困难,特别是让它们隐藏在向后导航上.

我在Rails 5 w/Turbolinks上.

这是发生的事情:

1. 我单击一个具有Bootstrap工具提示的链接
2. 该链接将我带到一个新页面
3. 我导航回浏览器中的原始页面(后退按钮)
4. 我在步骤1中单击的链接的工具提示处于活动/显示状态,无法隐藏

我已经尝试将工具提示放在链接内的元素(图像)上,但结果是一样的.

JS:

$(document).on('turbolinks:load', function(event) {
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  });
})

rails视图助手:

<%= link_to sample_path, data: { toggle: :tooltip, placement: :bottom }, title: "Title to display" do %>
  <%= image_tag "image-src-url", alt: "Alt goes here" %>
<% end %>

HTML输出:

<a data-toggle="tooltip" data-placement="bottom" title="" href="/sample-path" data-original-title="Title to display">
  <img alt="Alt goes here" src="image-src-url">
</a>

更新:

点击其上/内有工具提示的链接可能会出现问题.我只是尝试在新选项卡中打开链接(因此没有向后导航,只关闭新选项卡),工具提示仍保持活动状态,直到在原始页面上单击其他链接.