如何让 Backbone 路由器 + Kendo UI Mobile (tabstrip) 一起工作？答案

【问题标题】：How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?如何让 Backbone 路由器 + Kendo UI Mobile (tabstrip) 一起工作？
【发布时间】：2013-02-15 03:39:08
【问题描述】：

如何让 Backbone 路由器 + Kendo UI Mobile (tabstrip) 一起工作？

我刚刚开始使用 Backbone，并且一直在考虑将它与 UI 一起使用。通过禁用 JQM 的路由，我可以使用 Backbone 和 jQuery Mobile (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} );  
}

通过 Kendo UI Mobile 文档，我有这个工作页面：

<!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 路由器一起工作——其中路由“home”和“about”在点击 tabstrip 按钮时被调用，但无法弄清楚如何拦截点击事件，使我能够生成视图，将其附加到 DOM，然后确保更改相关的 tabstrip 按钮类以表示选定状态。

我尝试向 tabstrip 链接添加一个类 - $('.tabstrip-link').click( function () { alert( 'Clicked' ); } ) - 但无济于事（偶尔被解雇）。如何从 body 标记之间删除视图，并通过 Backbone 路由生成这些视图，将它们附加到页眉和页脚部分之间的布局，然后让 tabstrip 更改继续它的业务？

【问题讨论】：

标签： kendo-ui

【解决方案1】：

如果您想使用 Backbone 路由器，您可能需要禁用 Kendo 路由器。移动设备中的剑道路由器并非旨在禁用。但是乍一看，如果在创建应用程序之前放置以下内容，则对我有用。

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

之所以有效，是因为如果没有创建路由器，Pane 有自己的历史管理。

【讨论】：