CODEWITHSUNDEEP
jquery-mobilebackbone.jsrequirejs
demogar
demogar

Reputation: 711

Backbone and jQuery Mobile: Issues with programmatically new content and styles

I'm preparing a very basic Backbone application using jQuery Mobile for the UI and Backbone (with RequireJS) for the rest.

I used the following project as a base: https://github.com/fiznool/mobile-backbone-boilerplate

And used Christophe Coenraets guide for using jQuery Mobile along with Backbone: http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/

And found a couple of good information, for example in here: jquery mobile require.js and backbone

However, I'm having a lot of issues with new generated content and styles: more with pages that have more than one uri segment (for example: /movie/1).

My method that changes the view looks like the following:

var changeView = function(newView) {
  newView.render();
  newView.$el.addClass("ui-page").attr('data-role', 'page');

  $(container).append(newView.$el);

  $.mobile.changePage(newView.$el, {changeHash:false});
};

The page is actually changed, but it looks without any style. I found a solution by using the following code on the jquery.mobiile.config.js file:

$(document).bind('pagechange', function(e) {
    $('.ui-page-active .ui-listview').listview('refresh');
    $('.ui-page-active').page("destroy").page();
});

However, the styles are applied really late (after the page is rendered, like 500ms after).

Is there a better solution for this?

Upvotes: 1

Views: 486

Answers (1)

demogar
demogar

Reputation: 711

Well, I opted by removing jQuery Mobile and just style my components on my own.

I love jQuery Mobile and I used it in a couple of applications before, but the decision was more likely because the application felt too heavy when using jQuery Mobile and I just needed like 10% of jQuery Mobile.

Upvotes: 1

Related Questions