jQuery-Mobile Meteor sample integration and/or integration guidelines

Question

I'm impressed by Meteor and would like to use it with jQuery-Mobile. I'd like to know if somebody has already built a sample integration app. If not, some guidelines would be great.

Regards,

Cédric

Answer 1

I was wondering about this as well so I made a sample app:

http://jqmdemo.meteor.com/

And it seems to work well. You can find the source code here:

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

There are a few gotchas when using the two together, see the comments in the code.

UPDATE: It looks like meteor.com is rolling upgrades to the meteor framework breaking old code there. Use this project as a reference only as there are better ways to do the same thing with the newer framework versions.

Answer 2

I wasn't able to get jQuery Mobile to work initially when I tried to bundle the framework files in the clients directory. Meteor was throwing an error on JS files that were attempting to set the DOCTYPE, even files in the examples folder which were never referenced. By using the CDN-hosted version and disabling autoInitializePage as mentioned in a comment above, I got it to work without accessing any undocumented APIs.

<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>

Answer 3

I suggest taking a look at the jQuery package in the /packages/jquery folder.

All this does is add in the jquery.js file into the stack of files to get sent to the client. If you are after this you could add your own package called jquery-mobile and include the files it needs.

See the package.js file for how it works:

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

So just add the mobile files into your jquery-mobile package and do something like:

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');
});