Turbolinks 5 [正确加载 Javascript]答案

【问题标题】：Turbolinks 5 [Loading Javascript Properly]Turbolinks 5 [正确加载 Javascript]
【发布时间】：2017-02-19 06:38:00
【问题描述】：

我正在主持一个sample application，以清楚地说明问题。尝试访问该站点，然后点击另一个页面链接，使用浏览器返回返回上一页，然后使用浏览器前进按钮返回另一个页面（您可以继续来回移动）“希望你明白我在说什么”

代码：上一页

<h1>Form page</h1>
<div id="rating-form">
  <label for="rating-form"> Rating </label>
</div>

使用

加载我的 js 代码

$(document).ready(function(){});

doesn't work 直到整页加载（我认为）。所以我关注this解决方案

$(document).on('turbolinks:load', function() {

  $('#rating-form').raty({

    path: '/assets/',
    scoreName: 'review[rating]', 
    score: function(){
        return 0
    },


  });

});

导致示例应用程序中的错误

使用来自 this 解决方案 doest work 的 gem 'jquery-turbolinks' 和 turbolinks 5

那么我该如何处理这个问题呢？

【问题讨论】：

标签： javascript ruby-on-rails ruby

【解决方案1】：

你需要在页面导航之前销毁它：

$(document).on('turbolinks:before-cache', function() {
  // you will need to save current state (score, etc) before
  // doing this and load it during turbolinks:load
  $('#rating-form').raty('destroy')
});

【讨论】：

它有效。 . .所以基本上我在使用 'turbolinks:load' 和 'turbolinks:before-cache'

【解决方案2】：

我认为你想要的是load 事件。

$(window).load(function() {

  $('#rating-form').raty({

    path: '/assets/',
    scoreName: 'review[rating]', 
    score: function(){
        return 0
    },


  });

});

这是因为turbolinks:visit 在每个visit 之后触发（包括后退和前进），而 window.onLoad 仅在初始页面加载后触发（仅在您单击链接后立即触发（因为它发送AJAX 请求，这是唯一一次在 AJAX 响应加载后调用 onLoad，因此不包括 back 和 forward，因为 back 和 forward 在 turbolinks 启用时实际上并不发送请求。

turbolinks:visit 大部分时间都有效（仅当您定义的函数对每个页面更改都是幂等的，即您不添加/删除 DOM 元素或更新 JS 历史记录时）。但是由于 .raty(...) 函数所做的是附加（5 个图像 + 隐藏输入字段），那么您上面的代码基本上会不断地将这些附加到 #rating-form

【讨论】：

在我刷新整个页面之前，评级图像不会显示。 . . .