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:
- // 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
- <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>
- <li><a data-role="tab" href="#order-modify-overview2">Test 2</a></li>
- <li><a data-role="tab" href="#order-modify-overview3">Test 3</a></li>
- </ul>
</div>
- <div id="order-modify-overview1" >
- Test 1
- </div>
- <div id="order-modify-overview2" >
- Test 2
- </div>
- <div id="order-modify-overview3" >
- Test 3
- </div>
- </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!