jQuery-Mobile Meteor 示例集成和/或集成指南答案

【问题标题】：jQuery-Mobile Meteor sample integration and/or integration guidelinesjQuery-Mobile Meteor 示例集成和/或集成指南
【发布时间】：2012-04-25 17:37:55
【问题描述】：

Meteor 给我留下了深刻的印象，并希望将它与 jQuery-Mobile 一起使用。我想知道是否有人已经构建了一个示例集成应用程序。如果没有，一些指南会很棒。

问候，

塞德里克

【问题讨论】：

我对此也很感兴趣，并一直在尝试整合它。 jQuery Mobile 初始化页面并在加载时修改 DOM。然后流星初始化并将它自己的 html 添加到 DOM 和这些冲突。在mobileinit 事件中设置$.mobile.autoInitializePage = false; 应该可以防止这种情况发生。这就是我所得到的。如果/当我提出完整的示例/指南时，将更新答案。
例如，只需将 jquery.js 和 jquery-mobile.js 放在 /client 目录中。这样，它们的加载时间就会比其他脚本晚。不要使用包中的 jquery。我尝试了另一个答案中建议的打包 jquery-mobile，但由于 Meteor 的 javascript 加载顺序，我遇到了更多麻烦。

标签： jquery jquery-mobile integration sample meteor

【解决方案1】：

我也想知道这个，所以我做了一个示例应用程序：

http://jqmdemo.meteor.com/

而且它似乎运作良好。你可以在这里找到源代码：

https://github.com/snez/jqm-meteor

两者一起使用时有一些陷阱，请参阅代码中的 cmets。

更新：看起来meteor.com 正在对meteor 框架进行滚动升级，破坏了那里的旧代码。仅将此项目用作参考，因为有更好的方法可以使用较新的框架版本来做同样的事情。

【讨论】：

这个应用程序不工作。我得到update failed: Access denied。结果，我无法验证这是否真的解决了@rmarscher 提到的问题：如果您打开了两个浏览器，并修改其中一个的值，meteor 将更新 html 并破坏 jQuery 移动更改。
有关信息，可通过jqmdemo.meteor.com获取该演示的更新工作版本

【解决方案2】：

当我尝试将框架文件捆绑到客户端目录中时，最初无法让 jQuery Mobile 工作。 Meteor 在尝试设置 DOCTYPE 的 JS 文件上抛出错误，甚至是示例文件夹中从未引用过的文件。通过使用 CDN 托管的版本并禁用上面评论中提到的 autoInitializePage，我让它工作而无需访问任何未记录的 API。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
     $( document ).bind( "mobileinit", function( event, data ){
          $.mobile.autoInitializePage = false;
     });    
</script>

【讨论】：

【解决方案3】：

我建议查看 /packages/jquery 文件夹中的 jQuery 包。

所有这一切都是将 jquery.js 文件添加到文件堆栈中以发送到客户端。如果您在此之后，您可以添加自己的名为 jquery-mobile 的包并包含它需要的文件。

查看 package.js 文件了解其工作原理：

https://github.com/meteor/meteor/blob/master/packages/jquery/package.js

所以只需将移动文件添加到您的 jquery-mobile 包中并执行以下操作：

Package.on_use(function (api) {
  api.add_files('jquery.mobile-1.1.0.min.css', 'client');
  api.add_files('jquery.mobile-1.1.0.min.js', 'client');
});

【讨论】：

哦，然后使用“Meteor add”将其包含在您的应用程序中或添加到您的应用程序目录中的 .meteor/packages 文件中
另外，如果您阅读了来自 Meteor 开发人员之一的 N1mmy 的回复，他建议 API 将更改：stackoverflow.com/questions/10114526/… 所以我可能建议仅将 js 文件中的本地文件包含到您的模板中。