Rails With Jquery正确链接

Rails With Jquery Turbolinks Correctly

本文关键字:链接 Jquery With Rails      更新时间:2023-09-26

我一直在努力理解什么以及为什么我的Js在不同的页面加载之间被打破。

目前我有一个rails应用程序有4种不同的布局(布局是基于应用程序的部分的特殊脚本和功能。例如应用程序布局不同于我的索引布局。

即使使用不同的布局,它们也会以相同的方式加载应用程序js和应用程序cs文件

My header

 <%= javascript_include_tag "application", async: true  %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

我所有的布局都是这样加载的,除了我的首页使用一个单独的js文件。

 <%= javascript_include_tag "home", async: true  %> 

浏览网站,看起来一切都很好,但很快,涡轮链接似乎破坏了页面更改的一些js功能。

目前我的应用程序js看起来如列表

    //= require jquery
    //= require jquery.turbolinks
    //= require jquery_ujs
    //= require jquery-ui
    //= require bootstrap-sprockets
    //= require_self
    //= require global
    //
    //= require browser_timezone_rails/set_time_zone
    //= require jstz
    //= require js.cookie
    //= require cocoon
    //= require bootstrap-tagsinput
    //= require datetime_picker_input
    //= require twitter/typeahead
    //= require twitter/typeahead.min
    //= require intlTelInput
    //= require libphonenumber/utils
    //= require underscore
    //= require gmaps-auto-complete
    //= require jquery.wookmark
    //= require jquery.facebox
    //= require social-share-button
    //= require chosen-jquery
    //= require raphael
    //= require morris
    //= require gmaps/google
    //= require turbolinks
    //= require sitewide

Sitewide和Global是我的应用程序js中唯一的自定义文件

   Sitewide.js 
   var App = {
onLoadFns: [],
onPageLoad: function(callback) {
    this.onLoadFns.push(callback);
},
load: function() {
    _.each(this.onLoadFns, function(callback) {
        callback.call(this);
    }, this);
}
};
$(function() {
Turbolinks.enableProgressBar();
// Called everytime turbolinks loads a new page
$(document).on("page:load", function() {
    App.load();
});
// Called on initial full page load
//
// defer is used to allow all features to register
// their page load callbacks before App.load runs
_.defer(function() {
    App.load();
 });
  });

 $(document).on('page:fetch', function() {
 $(".loading-indicator").show();
  });
$(document).on('page:change', function() {
$(".loading-indicator").hide();
});

全局包含gmap自动完成的代码

    jQuery(function() {
   var completer;
   completer = new GmapsCompleter({
   inputField: '#gmaps-input-address',
  errorField: '#gmaps-error'
  });
completer.autoCompleteInit({
country: "us"
});
 });

我的问题是改变页面时js中断,我不知道我的问题是否比应用程序js的安排更深入,但似乎从所有的教程。在搜索了几乎所有我能找到的内容后,包括如何使用turbollinks处理Jquery turbollinks。包括下面的链接

http://joshfrankel.me/blog/2015/fix/rails-4-turbolinks-fix-for-jquery-only-working-after-hard-refresh/

Rails 4:如何使用$(document).ready()与turbo-links

但似乎没有一个对我的问题有帮助。我也有这样的想法,根据涡轮链接组织是一半的问题,我还需要组织从宝石导入的js。我找不到任何关于如何组织导入的宝石与turbollinks和jquery turbollinks一起工作的内容。任何帮助都将非常感激。我一直在处理这个问题,并赢得了短暂的战斗,但后来它却咬了我的屁股。

关于如何安排我的应用程序js或任何帮助我做错了我的布局,因为我迷路了。

谢谢朋友!

我遇到了同样的问题,我抓挠我的头我做了什么打破所有的页面有js。当我将Turbolinks from 2.x更新到Turbolinks 5时,问题就开始了,原因是一些事件的名称不同或已经从以前的版本更新了。值得庆幸的是,它们包括一个可以将旧事件映射到新事件的垫片。你可以在这里看或者复制粘贴下面的代码,创建一个文件:compatibility.coffee,放在javascripts/compatibility.coffee

{defer, dispatch} = Turbolinks
handleEvent = (eventName, handler) ->
  document.addEventListener(eventName, handler, false)
translateEvent = ({from, to}) ->
  handler = (event) ->
    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
    event.preventDefault() if event.defaultPrevented
  handleEvent(from, handler)
translateEvent from: "turbolinks:click", to: "page:before-change"
translateEvent from: "turbolinks:request-start", to: "page:fetch"
translateEvent from: "turbolinks:request-end", to: "page:receive"
translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
translateEvent from: "turbolinks:render", to: "page:update"
translateEvent from: "turbolinks:load", to: "page:change"
translateEvent from: "turbolinks:load", to: "page:update"
loaded = false
handleEvent "DOMContentLoaded", ->
  defer ->
    loaded = true
handleEvent "turbolinks:load", ->
  if loaded
    dispatch("page:load")
jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
  if jQuery.trim(xhr.responseText).length > 0
    dispatch("page:update")

希望这对你有帮助。好运。

试试这个方法。

http://brandonhilkert.com/blog/organizing-javascript-in-rails-application-with-turbolinks/

发现作者正在使用这种方法构建带有turbollinks的复杂rails应用程序