jquery mobile backbone routing

Question

I'm using jquery mobile and backbonejs. kinda stuck with backbone routing with transition property enabled. any suggestion will be great..

      define(['jquery'], function ($) {
      $(document).on("mobileinit", function () {
          $.mobile.ajaxEnabled = false;
          $.mobile.linkBindingEnabled = false;
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
          $.mobile.defaultPageTransition = "slide";
     });
});

but the slide transition doesnt works.

---

the code for the router is below

define([
'jquery',
'underscore',
'backbone',
'backbone.subroute'], function($, _, Backbone) {
var AppRouter = Backbone.Router.extend({
    routes: {
        // general routes 
        '': 'defaultAction',
        'login':'login',
        'message':'message',
        'menu': 'mainMenu',
     
        // Default
        '*actions': 'defaultAction'
    }
});

var initialize = function() {

        $('.back').live('click', function(event) {
            event.preventDefault();
            window.history.back();
            return false;
        });

    var app_router = new AppRouter;
    app_router.on('route:defaultAction', function(actions) {
        require(['views/home/register'], function(RegisterView) {
            // We have no matching route, lets display the home page 
            console.log('At defaultAction');
        var registerView = new RegisterView();
        registerView.render();
           /// this.changePage(loginView, 'slide');
        });
    });
  
     app_router.on('route:login', function(actions) {
        require(['views/home/login'], function(LoginView) {
            // We have no matching route, lets display the home page 
            console.log('At defaultAction');
        var loginView = new LoginView();
        loginView.render();
           /// this.changePage(loginView, 'slide');
        });
    });
    app_router.on('route:mainMenu', function(actions) {
        require(['views/home/menu'], function(MainMenuView) {
            console.log('At mainMenu::router');
        var mainMenuView = new MainMenuView();
        mainMenuView.render();
          //  this.changePage(mainMenuView, 'slide');
});
    });

can we use to cal changePage here for transition?

Answer 1

This can be in a init.js file.

(function($){

    var appRouter = Backbone.Router.extend({ 
            routes: {   "": "showActivitiesPage"
            },

            showActivitiesPage: function() {                
                $.mobile.changePage("#activities", { reverse: false, changeHash: false });                          
            }           
    }); 

}(jQuery));

You can use change page, even when the hash listening is set to false JQM/backbone does not stop us from using the change Page and hash routing.

Check out this link it has an example in all one fiel but you can break it into controller ,model, and view

http://blog.chariotsolutions.com/2011/12/introduction-to-backbonejs-with-jquery.html

In context to the above example:

Controller:

(function($){
$('#activities').live('pageinit', function(event){
    var activitiesListContainer = $('#activities').find(":jqmData(role='content')"),
        activitiesListView;
    exercise.initData();
    activitiesListView = new exercise.ActivityListView({collection: exercise.activities, viewContainer: activitiesListContainer});
    activitiesListView.render();
});

}(jQuery));

Model:

(function($){

exercise.Activity = Backbone.Model.extend({
});

exercise.Activities = Backbone.Collection.extend({
    model: exercise.Activity,
    url: "exercise.json"
});

}(jQuery));

View:

(function($){
exercise.ActivityListView = Backbone.View.extend({
        tagName: 'ul',
        id: 'activities-list',
        attributes: {"data-role": 'listview'},

        initialize: function() {
            this.template = _.template($('#activity-list-item-template').html());
        },

        render: function() {
            var container = this.options.viewContainer,
                activities = this.collection,
                template = this.template,
                listView = $(this.el);

            $(this.el).empty();
            activities.each(function(activity){
                listView.append(template(activity.toJSON()));
            });
            container.html($(this.el));
            container.trigger('create');
            return this;
        }
    });
}(jQuery));

exercise can be global variable.