Turbolinks消灭了jQuery Mobile类 [英] Turbolinks wipes out jQuery Mobile classes

问题描述

当我使用Turbolinks在我的rails应用程序中加载页面时，DOM缺少通常由 jQuery Mobile 。我的所有JavaScript文件都运行;唯一的问题是我失去了JavaScript所需的一些样式实际上工作。

When I load a page in my rails app using Turbolinks, the DOM lacks the styles that are normally applied by jQuery Mobile. All of my JavaScript files run; the only problem is that I lose some of the styles I need for the JavaScript to actually work.

例如，使用Turbolinks，我的标题是：

For example, with Turbolinks, my header is:

<a rel="external" href="/">MY SITE</a>

没有，它是：

<a rel="external" href="/" class="ui-link">MY SITE</a>

我已经确认我的JS文件与Turbolinks一起运行。问题是预期的jQuery Mobile类不存在。

I have confirmed that my JS files are running with Turbolinks. The trouble is that the expected jQuery Mobile classes don't exist.

我不确定如何在单击Turbolink时确保应用这些类。我将不胜感激任何关于正确方向或区域的建议。

I'm not sure how to ensure the application of these classes when a Turbolink is clicked. I would appreciate any suggestions as to the right direction or area.

我尝试通过以下方式包装JavaScript：

I've tried wrapping JavaScript in the following ways:

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

和：

$(document).on('turbolinks:load', function() {
  //functions
});

我已将coffeescript包装在同一个：

I've wrapped coffeescript in the same:

ready = ->
  #coffee
$(document).on('turbolinks:load', ready)

两者似乎都适用于我正常的JS / coffeescript活动，所以这不是问题 - 它只是丢失的jQuery Mobile类。

Both seem to work for my normal JS/coffeescript activities, so that is not the issue--it's only the jQuery Mobile classes that are lost.

My application.js文件是：

My application.js file is:

//= require jquery
//= require jquery_ujs
//= require jquery.mobile
//= require js-routes
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .

我尝试重新排序这几种不同的方法无济于事。

I've tried reordering these a few different ways to no avail.

我的所有JavaScript都是用 app / assets / javascripts / base.js 编写的，中有几个coffeescript文件app / assets / javascripts 。

All my JavaScript is written in app/assets/javascripts/base.js, and there are several coffeescript files in app/assets/javascripts.

我尝试使用 jquery-turbolinks ，但它没有帮助，似乎也没有设计来解决这里的根问题，所以我删除了它。

I tried using jquery-turbolinks, but it didn't help, nor does it seem designed to sovle the root problem here, so I removed it.

我还运行 bundle exec rake assets：precompile （：clean ， ：clobber ）很多次，所以我认为这不是问题。

I've also run bundle exec rake assets:precompile (:clean, :clobber) many times, so I don't think this is the issue.

这一切都在开发中但问题也存在于生产中。

This is all in development, but the problem also exists in production.

推荐答案

答案是Turbolinks和jQuery Mobile做了很多相同的事情（都用AJAX替换整页加载）和一个不需要同时使用，它们不能同时协同工作。 JQM更适合于必须进行移动优化的网站（大多数网站？）。

The "answer" is that Turbolinks and jQuery Mobile do many of the same things (both replace full page loads with AJAX), and one does not need to use both, and they are not designed to work together. JQM is better suited for a site that has to be mobile optimized (most sites?).

我卸载Turb​​olinks ，一切都解决了。

请更正我错误描述的任何内容。

Please correct anything I've mischaracterized.

这篇关于Turbolinks消灭了jQuery Mobile类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！