Question

我正在主持一个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

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

Answer 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')
});

Answer 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的唯一时间，因此不包括后退和前进，因为当启用turbolinks时后退和前进实际上不发送请求。）

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

Turbolinks 5 [正确加载Javascript]

2 个答案: