Rails 3.1和jQuery mobile:在考虑资产管道的同时组织JS和CSS的最佳方式？

Question

我正在将我的Rails 3.1应用程序与jQuery mobile(Beta 2,目前)集成,我不确定如何组织我的JS和CSS.

我在我的application.mobile.erb的head标签中有这个(从http://jquerymobile.com/download/复制):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

我应该把我的stylesheet_link_tag用于'应用程序',因此我的CSS样式不会覆盖jQuery mobile的花哨CSS吗？"应用程序"的javascript_include_tag怎么样？

或者所有这些都应该完全分开？

我只是不确定如何组织所有这些/如果有传统的方法来做到这一点.投入赞赏.

(如果您需要,请询问更多详情.)

编辑:*我也想知道在哪里放置我的移动专用JS和CSS ...

Answer 1

现在有一个jQuery Mobile Ruby gem,它将在资产管道中为您提供jQuery Mobile文件.

安装很简单.只需将gem添加到您的应用程序中即可Gemfile

gem "jquery-mobile-rails"

并运行bundle install.然后,你可以添加

//= require jquery.mobile

到您application.js或您想要包含文件的任何其他地方.

Answer 2

就像你一样,我很困惑,弄清楚如何使用Rails 3.1的新资产管道来使用jQuery Mobile(现在是最终的1.0).

首先,将jquery.mobile.js和jquery.mobile.css分别放入assets/javascripts和assets/stylesheets.

其次,在您的application.js清单中插入"require jquery.mobile"

//= require jquery
//= require jquery_ujs
//= require jquery.mobile

和你的application.css清单一样:

*= require_self
*= require_tree .
*= require jquery.mobile

第三,将"application.js"和"application.css"放入布局application.html.erb中

<meta name="viewport" content="width=device-width, initial-scale=1">
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag    "application" %>
<%= csrf_meta_tags %>

第四,不要忘记添加'meta name ~~~'行以使其正常工作.

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

还要正确使用jQuery移动属性,例如页面中的"data-role ="page"'.其他人建议使用像'jquery-mobile-rails'或类似的宝石,但我不会.