如何獲得Backbone路由器+ Kendo UI Mobile（tabstrip）一起工作？

如何獲得Backbone路由器+ Kendo UI Mobile（tabstrip）一起工作？如何獲得Backbone路由器+ Kendo UI Mobile（tabstrip）一起工作？

我剛剛開始使用Backbone，並一直在尋找與UI一起使用它。我能夠通過禁用JQM的路由骨幹和jQuery移動（JQM）這樣做，因爲在這篇文章中概述：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}); 
}

努力通過劍道UI移動文檔，我有這個工作頁：

<!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>

它有一個帶2個按鈕的標籤條，可以在2個視圖之間切換。

我可以讓它與Backbone路由器一起工作 - 通過單擊tabstrip按鈕調用路由「home」和「about」，但無法解決如何攔截點擊事件，使我能夠生成視圖，將其附加到DOM，然後確保將相關的選項卡按鈕類更改爲表示所選狀態。我嘗試添加一個類到tabstrip鏈接 - $（'。tabstrip-link'）。click（function（）{alert（'Clicked'）;}） - 但無濟於事（零星地解僱）。我如何從主體標籤之間移除視圖，並通過Backbone路徑生成這些視圖，並將它們追加到頁眉和頁腳部分之間的佈局，然後讓標籤欄更改它的業務？

來源

2013-02-15 Webdevd

如果您希望使用Backbone路由器，您可能需要禁用Kendo路由器。手機中的Kendo路由器不是被設計爲禁用的。然而，乍一看，如果在創建應用程序之前放置了以下內容，那麼下面的內容會有效。

kendo.mobile.Application.prototype._startHistory = function() {}; 
kendo.mobile.Application.prototype.router = {destroy: function() {}};

它可以工作，因爲如果未創建路由器，窗格有它自己的歷史管理。

來源

2014-06-12 00:35:01 robocat

如何獲得Backbone路由器+ Kendo UI Mobile（tabstrip）一起工作？

回答

相關問題