1

jQuery Mobile と PhoneGap を使用してモバイル アプリをセットアップしています。私がやりたいことは、ID「news_link」のリンクをクリックすると、jQuery がデータベースからデータを取得し、それを jQm の折りたたみ可能なセットに入れることです。私のソリューションでは、コールバック関数内で $.mobile.changePage を使用したいと考えていました。コードがページを変更する前に、データがフェッチされてコンテナー内に配置されるまで待ちたいからです。コードは次のとおりです。

$(function() { 
  $('#news_link').click(function(){
    loadNewsFromDB(function(){
       $.mobile.changePage( $("#news"), { transition: "slideup"} );
    });
});

loadNewsFromDB は PhoneGap の SQLite データベース関数で、データベースからコールバック関数を追加してデータをフェッチします。コンテンツは、.html-function を使用して目的のコンテナーに配置されます。

function loadNewsFromDB(){
//some code here
theDB.transaction(function(tx) {
    tx.executeSql(sqlStr, [], onLoadNewsSuccess, onLoadNewsError);
},onTxError, onTxSuccess);

function onLoadNewsSuccess(tx, results){
    //some code here
    $("#newsSet").html(htmlCodeAndContentToPut);

Html は jQm の基本的な ui モジュールです。

<!-- some html code here --!>
<div data-role="page" id="news">
    <div data-role="content">
        <div id="newsSet" data-role="collapsible-set" data-mini="true">

デバッグを行うと、$.mobile.changePage-function に到達するまでコードがうまく機能することがわかります。どういうわけかそれはページを変更しません。関数が他の場合にうまく機能することを確認しましたが、コールバック関数内では機能しません。

誰かが私に手を差し伸べてくれたら、とても感謝しています。SQLite からデータをフェッチし、データがフェッチされるのを待ち、データをコンテナに入れ、ページを変更するための他の回避策はありますか?

4

2 に答える 2

0

changePage が発火する直前ということですか?

次に、のpagebeforechange直前にトリガーされるイベントを使用しchangePageます。私はこれを使用しています：

  $(document).on( "pagebeforechange", function( e, data ) {
  // do stuff
  console.log( e )
  console.log( data )
  });

すべての changePage リダイレクトに対して。オブジェクトにはすべてのdatachangePage パラメーター (toPage、options.fromPage など) が含まれるため、必要に応じて changePage 呼び出しをほとんど再構成できます。

EDITpushstate : また、有効な場合、このイベントが 2 回発生することに注意してください。1 つのイベントは、(hashChange での) 実際の遷移によってトリガーさtoPageれstringます。2 番目のイベントは pushState によってトリガーされ、 as を渡しtoPageますobject。以下を確認することで、何をいつ行うかを定義できます。

 typeof data.toPage == 'string'

編集:あなたの特定のケースでは、データベースからデータを取得するのにかかる時間に応じてpreventDefault()、オリジナルを使用します。changePageおそらくpreventDefault、trigger your database callpageBeforeChange 内から、データをロードしたらtrigger、新しい changePage. 詳細については、JQM ドキュメントのこの例を参照してください。

于 2012-09-03T20:34:38.780 に答える
0
  • Ajax$.mobile.changePageのコールバック関数で問題が発生したことは一度もないので、コールバック関数からページを変更することが可能です
  • loadNewsFromDB関数をパラメーターとして関数を呼び出します。しかし、関数自体
    でこのパラメーターをどこでどのように使用しているかわかりません。loadNewsFromDB関数にパラメータを定義する必要はありませんloadNewsFromDBか?
    コールバック関数を定義した後、データの準備ができたら呼び出す必要があります。
  • $.mobile.changePage関数で直接使用しようと思いonLoadNewsSuccessます。

コードは次のようになると思います。

function loadNewsFromDB(callback){
//some code here
theDB.transaction(function(tx) {
    tx.executeSql(sqlStr, [], function(tx, result) {
            ...some code here...;
            if (callback) {
                callback();
            }    
        },onLoadNewsError);
},onTxError, onTxSuccess);

編集：
コメントの質問に答えるには：

  • コードでは、イベント$(function()のリスナーを追加してい ます。$('#news_link').click
  • このリスナーでは、Jquery に関数を呼び出しloadNewsFromDB、次のコールバック関数をパラメーターとして送信するように指示しますfunction(){ $.mobile.changePage( $("#news"), { transition: "slideup"}。

コールバック関数を送信するだけでは十分ではありません。コード内で使用 (呼び出し) する必要があります。
それを使用するには、次のことを行いました。

  • 関数定義が変更 されました。新しいパラメーターがあります: (これは、コールバック関数をコールバックするために使用できる名前です)。function loadNewsFromDB(callback)
    callback

  • 関数では、関数loadNewsFromDBを呼び出して、 インライン関数、onTxError、onTxSuccess のtransaction3 つのパラメーターを送信します。インライン関数は 、関数を呼び出して 4 つのパラメーターを送信するだけです。 3 番目のパラメーターを変更しました。関数 を呼び出す代わりに、必要な関数をインラインで記述しました
    tx.executeSqlsqlStr, [], onLoadNewsSuccess, onLoadNewsError

    onLoadNewsSuccess

  • インライン関数内にコールバック関数が存在するか調べました 存在するif (callback)
    なら呼び出しました！ コールバック関数を呼び出すと、ページが変更されます...callback();
于 2012-09-03T20:18:54.770 に答える