title: How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?
body: <p>How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?</p>
  
  <p>I am just getting started with Backbone and have been looking at using it with a UI. I was able to do this with Backbone and jQuery Mobile (JQM) by disabling JQM's routing as outlined in this post: <a href="http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/" rel="nofollow">http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/</a></p>
  
  <pre><code>// 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} );  
  }
  </code></pre>
  
  <p>Working through the Kendo UI Mobile docs, I have this working page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My App&lt;/title&gt;
      &lt;link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;section data-role="layout" data-id="default"&gt;
          &lt;header data-role="header"&gt;
              &lt;div data-role="navbar"&gt;My App&lt;/div&gt;
          &lt;/header&gt;
  
          &lt;!--View content will render here--&gt;
  
          &lt;footer data-role="footer"&gt;
              &lt;div data-role="tabstrip"&gt;
                  &lt;a class="tab-a" data-icon="home" href="#home"&gt;Home&lt;/a&gt;
                  &lt;a class="tab-a" data-icon="bookmarks" href="#about"&gt;About&lt;/a&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/section&gt;
  
      &lt;div data-role="view" data-layout="default" id="home"&gt;Home Page&lt;/div&gt;
      &lt;div data-role="view" data-layout="default" id="about"&gt;About Page&lt;/div&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          var app = new kendo.mobile.Application();
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It has a tabstrip with 2 buttons that enables you to switch between the 2 views.</p>
  
  <p>I can get it to work with a Backbone router - whereby the routes "home" and "about" are called as the tabstrip buttons are clicked, but cannot work out how to intercept the click events, enabling me to generate a view, append it to the DOM, and then ensure that the relevant tabstrip button class is changed to represent the selected state.</p>
  
  <p>I tried adding a class to the tabstrip links - $('.tabstrip-link').click( function () { alert( 'Clicked' ); } ) - but to no avail (sporadically fired). How can I remove the views from between the body tags, and generate these via a Backbone route, append them to the Layout between the header and footer sections, and then let the tabstrip change go about it's business?</p>