CODEWITHSUNDEEP
jquery-mobilemeteor
Steeve Cannon
Steeve Cannon

Reputation: 3682

How can I get Meteor's reactivity and view rendering to work correctly with Jquery Mobile and it's view rendering?

I have Jquery Mobile working and have found the best way to get it to work is by including it in the /client/ directory. So, I have the following files in my /client/ directory

jquery.js jquery-mobile.js jquery-mobile.css

Then I include this in my index.html

<script type="text/javascript">
   $( document ).bind( "mobileinit", function( event, data ){
        $.mobile.autoInitializePage = false;
   }    
</script>

I tried creating a smart package but then the loading order invalidated jquery plugins for some reason. I tried just using references in the HEAD but that do invalidated jquery plug ins for some reason. The above works, pages transition, views render and I can even use the Meteor auth branch and render subscriptions.

The problem I am having now is when Meteor updates the DOM with data and renders the data it is not rendered with JQM.

For example, if I try to use a JQM Listview to display a Meteor subscription it just formats like a regular un-ordered list .

Here is the template code.

{{#each get_groups}}
    <ul data-role="listview" data-theme="a">
      <li>{{name}}</li>
    </ul>
  {{/each}}

Which just renders as bulleted items. If I use static data like the JQM tuts show it renders fine.

<ul data-role="listview" data-theme="a">
    <li><a href="acura.html">Acura</a></li>
    <li><a href="audi.html">Audi</a></li>
    <li><a href="bmw.html">BMW</a></li>
  </ul>

I am suspect I may need to call some kind of refresh, which means I would have to use observe on the collection subscriptions I imagine.

I am having the same problem with a custom login button. I use a template helper to return the Meteor.user().username and the button doesn't get formatted by JQM. If I don't use return the username the button of course renders find through JQM.

I also have the same problem when I try to access the Handlebars current user. If I try to do the following the publicPage will load. 

{{#if currentUser}}
   {{>privatePage}}
{{else}}
   {{>publicPage}}
{{/if}}

Once I login the privatePage flickers quickly and then just a white screen. If I remove the references to currentUser then I can login and use the JQM changePage method to load the privatePage.

$.mobile.changePage("#privatePage");

I only have a rough understanding but I believe it is related to how and when JQM formats data for rendering vs. how and when Meteor formats data for rendering.

Does anyone has any ideas on how I might get JQM to behave nicely with Meteor? or if I should even bother and maybe use another mobile front end alongside Meteor?

Thanks Steeve

Upvotes: 1

Views: 955

Answers (1)

snez
snez

Reputation: 2480

You do have to refresh when data changes. Here's a full sample app with Meteor and JQM:

http://jqm.meteor.com/

Source code here:

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

Notice on lines 17 and 38 that when an element is rendered, you have to refresh it and rebind any custom events to it.

Upvotes: 1

Related Questions