changing a page in jqm after a fetch - view not di

Question

I am trying to change a page and display a view with JQM and backbone.

My home page loads ok but when I try and go to the second page - this is when I have a few questions. the page loads but nothing is showing

so my app has a router

 var AppRouter = Backbone.Router.extend({
//define routes and mapping route to the function
    routes: {
        '':    'showHome',         //home view
        'home': 'showHome',        //home view as well
        'products/productList' : 'showProducts',

    },

    initialize:function () {
    // Handle back button throughout the application
    $('.back').live('click', function(event) {
        window.history.back();
        return false;
    });
    this.firstPage = true;
    },

    defaultAction: function(actions){
        this.showHome();
    },

    showHome:function(actions){
        // will render home view and navigate to homeView
        var homeView=new HomeView();
        homeView.render(); 

        this.changePage(homeView, 'fade');
    },



    showProducts:function(){

    var productList=new Products();
    var self = this;

      productList.fetch({
         success:function(data) {   
        self.changePage(new ProductListView({collection:data}));
         }
            }); 

    },

    changePage:function (view, transition) {
        //add the attribute 'data-role="page" ' for each view's div

        if (transition != "slidefade") {
         transition = "pop";                
        }

        view.$el.attr('data-role', 'page');   
        $('.ui-page').attr('data-role', 'page');

        //append to dom
        $('body').append(view.$el);  


        if(!this.init){   
            $.mobile.changePage($(view.el), {changeHash:false, transition: transition});


        }else{   
            this.init = false;
        }            
    }       

});

$(document).ready(function () {
console.log('App Loaded');
app = new AppRouter();
Backbone.history.start();
});

return AppRouter;

here is also my view page for product

var ProductListView = Backbone.View.extend({

template: _.template(productViewTemplate),

initialize: function () {
        _.bindAll(this, "render");
     this.collection.bind("reset", this.render);
    },

 render: function () {
 var self = this;
        this.collection.each(function(model) {
        self.$el.append(self.template(model.toJSON())); 
        console.log("here");
 });


}

});

return ProductListView;

So from within the homeView I can change the page and that's fine the issue what am i doing wrong on the products view for it not to return a thing.. no errors are returned.

thanks

---

so I have done some more work and made my show products function

showProducts:function(){

        var productList=new Products();
        var self = this;
        var productListView =new ProductListView({collection:productList});

 productList.fetch(self.changePage(productListView)); 

    }

this works when the view is

var ProductListView = Backbone.View.extend({

template: _.template(productViewTemplate),
initialize : function () {
    _.bindAll(this, "render");
    this.collection.bind("reset", this.render, this);

},

 render: function() {
 var self = this;
        this.collection.each(function(model) {
        self.$el.append(self.template(model.toJSON())); 
        console.log("here");
 });


}

});

return ProductListView;

but now jQueryMobile doesnt add on its code so it has no styling..

any suggestions?

Answer 1

Both Backbone.js's router and jQuery Mobile use the hashtag and don't work so well together. There are ways to get them to work but unless you have specific reason to do so I'm not sure its worth it, instead I'd recommend using jQuery-Mobile-router which is a plugin for jQuery mobile, that was created for this very reason (that is to work with Backbone.js). As a bonus the jQuery Mobile Router ties in with the special JQM Page events.