How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?
How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?
I'm just getting started with Backbone and am looking at how to use it with a UI. I was able to do this with Backbone and jQuery Mobile (JQM) by disabling JQM routing as mentioned in this post: http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
// Disable JQM routing
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
// Backbone Router
// Create backbone view, append it to the body, and then use JQM to change to that page
home: function () {
page = new HomeView();
page.render();
$('body').append( $(page.el) );
$.mobile.changePage( $(page.el), {changeHash:false} );
}
Working with Kendo UI Mobile Docs I have this working page:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a class="tab-a" data-icon="home" href="#home">Home</a>
<a class="tab-a" data-icon="bookmarks" href="#about">About</a>
</div>
</footer>
</section>
<div data-role="view" data-layout="default" id="home">Home Page</div>
<div data-role="view" data-layout="default" id="about">About Page</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>
It has a two-button strip that allows you to switch between two views.
I can get it to work with the Backbone router, with the "home" and "about" routes being called when the tab buttons are clicked, but can't figure out how to catch the click events, letting me create a view, add it to the DOM, and then make sure that the corresponding tabstrip button class has been modified to represent the selected state.
I tried adding a class to tabstrip links - $ ('. Tabstrip-link'). click (function () {alert ('Clicked');}) - to no avail (fired sporadically). How can I remove the views from the body tags and generate them with the backbone route, add them to the layout between the header and footer sections, and then allow the tab stripe changes in that business?
source to share
You may need to disable your Kendo router if you want to use the Backbone router. The Kendo router on mobile devices is not designed to be disabled. However, at first glance, the following was created for me if it was posted before building your application.
kendo.mobile.Application.prototype._startHistory = function() {};
kendo.mobile.Application.prototype.router = {destroy: function() {}};
This works because the panel has its own history control if no router is created.
source to share