Question

如何让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路由器 - 当点击tabtrip按钮时调用“home”和“about”路由，但无法解决如何拦截点击事件，使我能够生成视图，将其附加到DOM，然后确保更改相关的tabstrip按钮类以表示所选状态。

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

Answer 1

如果您想使用Backbone路由器，可能需要禁用Kendo路由器。移动设备中的Kendo路由器不能被禁用。但是乍一看，如果在创建应用程序之前放置了以下内容，则以下内容适用于我。

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

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

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

1 个答案: