Rails 4:如何在Turbo-Links中使用$ {document).ready()

2020/09/28 01:41 · javascript ·  · 0评论

尝试以“ rails方式”组织JS文件时,我在Rails 4应用程序中遇到了一个问题。它们以前分散在不同的视图中。我将它们组织到单独的文件中,并通过资产管道进行编译。但是,我刚刚了解到,在打开涡轮链接时,jQuery的“就绪”事件不会在随后的点击中触发。第一次加载页面时,它可以工作。但是,当您单击链接时,其中的任何内容ready( function($) {都不会执行(因为该页面实际上不会再次加载)。好的解释:在这里

所以我的问题是:什么是在涡轮链接打开时确保jQuery事件正常工作的正确方法?您是否将脚本包装在特定于Rails的侦听器中?或者,也许rails有一些使它不必要的魔力?该文档对如何工作有点含糊不清,尤其是在通过清单(如application.js)加载多个文件方面。

这是我的工作... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

最后一行监听页面加载,这是turbo链接将触发的内容。

编辑 ...添加Javascript版本(按请求):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

编辑2 ...对于Rails的5(Turbolinks 5)page:load成为turbolinks:load和将初始负载甚至被解雇。因此,我们可以执行以下操作:

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

  ...your javascript goes here...

});

我刚刚了解了解决此问题的另一种选择。如果加载jquery-turbolinks宝石它将绑定Rails的Turbolinks事件的document.ready事件,这样你就可以用通常的方式写你的jQuery。您只需在js清单文件(默认为:)jquery.turbolinks之后添加即可jqueryapplication.js

最近,我找到了最干净,最容易理解的处理方式:

$(document).on 'ready page:load', ->
  # Actions to do

要么

$(document).on('ready page:load', function () {
  // Actions to do
});

编辑

如果将
委托事件绑定到document,请确保将它们附加在ready函数外部,否则它们将在每个page:load事件上反弹(导致同一函数多次运行)。例如,如果您有这样的电话:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

将它们带出ready函数,如下所示:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

绑定到的委派事件document无需绑定到该ready事件。

Rails 4文档中找到了这一点,类似于DemoZluk的解决方案,但略短:

$(document).on 'page:change', ->
  # Actions to do

要么

$(document).on('page:change', function () {
  // Actions to do
});

如果您有调用的外部脚本,$(document).ready()或者不愿意重写所有现有的JavaScript,则可以使用此gem继续使用$(document).ready()TurboLinks:https : //github.com/kossnocorp/jquery.turbolinks

按照新的rails指南,正确的方法是执行以下操作:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

或者,在coffeescript中:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

不要听事件$(document).ready,只会触发一个事件。毫不奇怪,无需使用jquery.turbolinks gem。

这适用于4.2或更高版本的导轨,不仅适用于导轨5。

注意:有关干净的内置解决方案,请参见@SDP的答案

我将其修复如下:

通过更改包含顺序,确保在包含其他依赖于应用程序的js文件之前包含application.js:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

定义一个全局函数来处理绑定 application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

现在,您可以绑定以下内容:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

以上都不适合我,我通过不使用jQuery的$ {document).ready来解决此问题,而是使用addEventListener。

document.addEventListener("turbolinks:load", function() {
  // do something
});
$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

您必须使用:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

来自turbolinks doc

要么使用

$(document).on "page:load", attachRatingHandler

或使用jQuery的.on函数达到相同的效果

$(document).on 'click', 'span.star', attachRatingHandler

有关更多详细信息,请参见此处:http : //srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

您可能不希望使用变量来保存“就绪”功能并将其绑定到事件,而是希望在触发readypage:load触发事件

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

这是我做的确保没有两次执行的操作:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

我发现使用jquery-turbolinksgem或组合使用$(document).ready和/ $(document).on("page:load")$(document).on("page:change")单独使用都会表现出异常情况-尤其是在开发中。

我发现以下这篇文章对我非常有用,并且详细介绍了以下内容的用法:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

我想将这些留给那些升级到Turbolinks 5的人:修改代码的最简单方法是:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

至:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

参考:https : //github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

经过这么多测试的解决方案终于来到了这一点。这么多您的代码绝对不会被调用两次。

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

我通常对Rails 4项目执行以下操作:

application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

然后在其余的.js文件中,而不是使用$(function (){})I调用onInit(function(){})

首先,安装jquery-turbolinksgem。然后,别忘了将包含的Javascript文件从正文结尾application.html.erb移至<head>

如此处所述,如果出于速度优化的原因将应用程序javascript链接放在页脚中,则需要将其移动到代码中,以便在代码内容之前加载。这个解决方案对我有用。

我发现将函数用于时,我的函数加倍了readyturbolinks:load所以我使用了

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

这样,如果支持turbolinks,您的功能就不会加倍!

本文地址:http://javascript.askforanswer.com/rails-4ruhezaiturbo-linkszhongshiyong-document-ready.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!