jquery mobile 在生产 rails 3.2 应用程序中不起作用答案

【问题标题】：jquery mobile does not work in production rails 3.2 appjquery mobile 在生产 rails 3.2 应用程序中不起作用
【发布时间】：2013-02-15 18:32:33
【问题描述】：

我有一个使用 jquery mobile 的 Rails 3.2.9 应用程序。

我使用 jquery_mobile_rails gem 来嵌入 jqm，并使用 mobylette gem 来检测请求何时来自移动设备。

在开发环境（Webrick）中一切正常

生产环境基于 apache/passenger。当我运行 rake assets:precompile all 似乎一切顺利，如果我查看 assets/manifest.yml，我会发现一切正常。

当我调用欢迎页面时，登录表单被发送到浏览器，但是在开发环境中，页面具有所有 jqm 格式，在生产中，html 没有“注入”所需的 JQM 代码，所以例如标签就是

<body>

而不是

<body class="ui-mobile-viewport ui-overlay-c">

因此，似乎在加载页面后，应该运行并使用 JQM 特定代码“丰富”html 的 javascript 没有被触发。

关于为什么会发生这种情况的任何提示？

编辑

assets
  javascripts
    application.js
    mobile
      application.js

views
  layouts
    application.html.erb
    application.mobile.erb

清单文件是：

javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_directory .


javascripts/mobile/application.js

//= require jquery.mobile
//= require_directory .

【问题讨论】：

你能发布你的application.js吗？
我编辑了问题以包含清单文件。我在子目录中需要 jquery.mobile，因此它不用于移动设备不使用的站点部分。我通过在移动布局中放置 '' 和 '' 来做到这一点
你能分享你的application.js吗？我们会看看问题出在哪里..
也许我不明白你的要求。我已经在这里发布了两个 application.js 文件的内容。反正问题已经解决了（看下文），原因是jquery 1.9 与jquery mobile 1.2.0 不兼容。干杯。

标签： jquery-mobile ruby-on-rails-3.2 asset-pipeline passenger

【解决方案1】：

如果您想包含来自特定目录（或库）的一堆文件，您可以使用index manifest file（查找 2.1.2）。真的很简单：

在您的目录 (app/assets/javascripts/mobile) 中创建一个文件 index.js，其内容为：
```
//= require_self
//= require other_files_you_want
```

（并且可选）：

    //= require_tree .

然后在您的 application.js 清单文件中，您可以要求具有目录名称的库，您在其中创建了 index.js 文件：
```
//= require mobile
```

我建议，当您通过这些步骤时，删除文件app/assets/javascripts/mobile/application.js。在一个应用程序中拥有多个名称为application.js 的文件并不是一种好的风格。

编辑（查看application.css之后）：

我建议在您的清单文件application.css 中进行一些更正：

将 css 代码移动到新文件中（例如 app/assets/stylesheets/custom.css.scss）
如果您使用了其他 css 库，请将它们像平常一样 (*= require your_css) 包含在您的 application.css 中。

【讨论】：

我会按照你的建议去尝试修改，但我相信我的问题出在其他地方。问题是 jqm 库已正确加载，但我的标记在页面加载时没有增强，这仅在生产模式下发生，而在开发模式下一切正常。
那我们应该看看你的application.css :)。
无论如何我不能把 //= require mobile 放在 application.js 中，因为我希望它只为 application.mobile.erb 模板加载，而不是为 application.html.erb 加载。
application.css => pastiebin.com/511f41acd60f4;移动/应用程序.css => pastiebin.com/511f42c0abd08;移动/mobileapp.css => pastiebin.com/511f430987fb7。另外，这是开发应用程序的网址redberry.dyndns-ip.com，这是生产应用程序的网址2.228.81.236
要查看差异，您必须使用被 mobylette gem 检测为移动设备的用户代理（请参阅github.com/tscolari/mobylette/blob/master/lib/mobylette/…）

【解决方案2】：

问题是由于最新版本的 jquery 和 jquery mobile 之间的不兼容造成的。

2012 年 10 月 2 日发布的 jquery mobile 1.2.0 与最新的 jquery 版本 1.9.x 存在问题。

具体来说，jquery 1.9 删除了 $.browser 方法，该方法在 jquery mobile 1.2.0 中使用。

因此，当 jqwery mobile 尝试初始化页面上的对象时，它会因错误而死

TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')

我通过强制使用jquery 1.8.3解决了这个问题；在 Gemfile 中

gem 'jquery-rails', '~> 2.1.4'

其中包括资产管道中的 jquery 1.8.3。

如果没有 BB Z10 上的网络检查器（或 android 4 设备上的远程调试功能），我将永远无法在移动平台上检测到此类 javascript 问题。

最后，BlackBerry Z10 Web Inspector 通过 Wi-Fi 工作，而 Android 设备需要 USB 连接才能进行远程调试工作。

【讨论】：