Jquery Mobile pushstate problem with tabs

Jquery Mobile pushstate problem with tabs

Hallo!

I'm working on an app thats is build on backbone.js, require.js and jQm. I'm not sure if this is a jQm Problem or a backbone Problem.

I have an issue where the jQm Tabs are not working if i enable the Backbone.history.start({ pushState: true });

I init my app like this:

  1. // Just use GET and POST to support all browsers
        Backbone.emulateHTTP = true;

        // Prevents all anchor click handling
        $.mobile.linkBindingEnabled = false;

        // Disabling this will prevent jQuery Mobile from handling hash changes
        $.mobile.hashListeningEnabled = false;
       
        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
        $.mobile.changePage.defaults.changeHash = false;
       
        // Import Constants from API on startup   
        var webservice = new Webservice();
        webservice.action = 'Utility/Constants';
        webservice.callback = {
                            success: function(result){
                                _.each(result, function(val, key) {
                                    window[key] = val;
                                });
                            },
                            //-- reload Website on error:
                            error: function(result)
                            {
                                alert("Error! Please reload the site!");
                            },
                            ajaxError: function()
                            {
                                alert("Error! Please reload the site!");
                            }
        };
        webservice.call();

        // Instantiates a new Backbone.js Mobile Router
        app.router = new MainRouter();
       
        // Error Displaying
        app.error = new ErrorDialogView();
       
         // Create a new session model and scope it to the app global
        // This will be a singleton, which other modules can access
        app.session = new SessionModel({});        

        // Check the auth status upon initialization,
        // before rendering anything or matching routes
        app.session.checkAuth({

            // Start the backbone routing once we have captured a user's auth status
            complete: function() {           
                // HTML5 pushState for URLs without hashbangs
                var hasPushstate = !!(window.history && history.pushState);                       
                if(hasPushstate) Backbone.history.start({ pushState: true });
                else Backbone.history.start();                        
               
                //Backbone.history.start();
            }
        });     

If i now display a simple jQm Tab on my site like following example, it doesn't work. It displays all Tab contents like normal/no Tab, so the widget don't gets inited correctly

  1. <div data-role="content">
        <div class="nav-header"><%= header %></div>
        <div data-role="tabs" id="order-modify-tabs">
            <div data-role="navbar" data-iconpos="notext" >
                <ul>
                    <li><a data-role="tab" href="#order-modify-overview1">Test 1</a></li>
  2.                 <li><a data-role="tab" href="#order-modify-overview2">Test 2</a></li>
  3.                 <li><a data-role="tab" href="#order-modify-overview3">Test 3</a></li>
  4.             </ul>
            </div>
  5.        <div id="order-modify-overview1" >
  6.             Test 1
  7.        </div>
  8.        <div id="order-modify-overview2" >
  9.             Test 2
  10.        </div>
  11.        <div id="order-modify-overview3" >
  12.             Test 3
  13.        </div>
  14.     </div>
    </div>

If i now disable the pushState on backbone, it works correctly.

So i think there is a Problem with the hash linking in the href of the Tabs by enabling pushstate. Maybe backbone rewrites here someting?

Is there a easy way by code to link them after the pageinit() event?

Thanks!