3

バックボーン ルーター + Kendo UI Mobile (タブストリップ) を連携させるにはどうすればよいですか?

Backbone を使い始めたばかりで、UI での使用を検討しています。この投稿で概説されているように JQM のルーティングを無効にすることで、バックボーンと 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 つのボタンを備えたタブストリップがあります。

バックボーンルーターで動作させることができます-それにより、タブストリップボタンがクリックされるとルート「ホーム」と「アバウト」が呼び出されますが、クリックイベントをインターセプトする方法を見つけることができず、ビューを生成して追加できますDOM に追加し、関連するタブストリップ ボタン クラスが選択された状態を表すように変更されていることを確認します。

タブストリップ リンクにクラスを追加しようとしました - $('.tabstrip-link').click( function () { alert( 'Clicked' ); } ) - しかし、役に立ちませんでした (散発的に発生しました)。body タグの間からビューを削除し、バックボーン ルートを介してこれらを生成し、それらをヘッダー セクションとフッター セクションの間のレイアウトに追加してから、タブストリップの変更をビジネスに任せるにはどうすればよいですか?

4

1 に答える 1

0

バックボーン ルーターを使用する場合は、剣道ルーターを無効にする必要がある場合があります。モバイルの剣道ルーターは、無効にするようには設計されていません。ただし、一見したところ、アプリケーションを作成する前に配置すると、次のように機能しました。

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

ルーターが作成されていない場合、ペインには独自の履歴管理があるため、機能します。

于 2014-06-12T00:35:01.340 に答える