0

jquery mobileとbackbone.jsを使用して、シングルページモバイルアプリケーションを作成しています。アイデアは、すべてのデータがクライアントに対してローカルであり、外部データがajaxを介してキャプチャされるということです。このアプリは、Phonegapを使用してデプロイすることを目的としています。

私は一般的なルックアンドフィール、スタイル、アニメーション、ページ変更などのためだけにjqmを使用しています。Backbone.jsは、アプリケーションモデル、サーバー同期、テンプレートレンダリング、およびルーティングの処理に使用されます。両方のライブラリ間の競合を防ぐために、jqmのすべてのajax関連関数が無効になっています。

$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;

メインページには、各要素が異なるアプリケーションビューに移動するメニューが読み込まれます。要素をクリックすると、AJAXを使用してデータが取得され、HTMLがその場で生成されてDOMに追加され、アプリケーションがそのページに変更されます。ルーティングは、より幅広いブラウザサポートのためにURLフラグメントを使用して行われます。

<a href="#news">News</a>

上記のコードは、サーバーから最新のニュースを取得してページをレンダリングするために必要な操作を実行するためのバックボーンルートを作成します。これらはすべて完璧に機能します。

私の問題:メニューの要素をクリックすると、(コードを実行する前に)最初に実行するのは、画面の上部までスクロールすることです。ひどい問題ではないようですが、意図しないスクロールによって、ajax呼び出しを行うときにjqmが表示する読み込みインジケーターが台無しになります。このアプリケーションが実行されているデバイスがfixedcssプロパティをサポートしていない場合、読み込みインジケーターはクリックされた要素の近くに配置されます。したがって、ビューポートが上にスクロールしても、ロードインジケータは元の位置に留まります。その結果、読み込みインジケーターが部分的または完全に非表示になります。

なぜこれが起こっているのか考えていますか?Visual Eventを使用して、jquery / jquery mobileによって添付された奇妙なクリックイベントを検索しようとしましたが、成功しませんでした。何かが足りないに違いありません。

前もって感謝します!

編集して、使用しているライブラリに関する情報を追加します

jquery:v1.6.2

jqm:v1.1.0(ブラックベリーデバイスの場合もv1.0ですが、jqmバージョン間で動作は変わりません)

backback.js:0.9.2(今回の執筆時点で最新)

4

1 に答える 1

1

次のようなリンクのデフォルトの動作を削除してみてください。

<a href="#news" onclick="return false;">News</a>

より洗練された技術を使用することができます。

于 2012-05-03T07:39:14.910 に答える