2

次のように機能する jQM アプリ (1.3.2) に折りたたみ可能なものを統合したいと考えています。

  1. 折りたたまれ始めます。
  2. クリックすると、サーバーから折りたたみ可能なリストアイテムの取得が開始されます。折りたたみ式は閉じたままです。ロード アイコンが回転している可能性があります。
  3. すべての要素が読み込まれ、リストビューが更新されて準備が整うと、折りたたみ可能なものが展開されます。
  4. もう一度クリックすると、すぐに閉じて、1 から始まります。

私の最初のアイデアは、expandイベントを取得してその伝播を防ぐことでした。読み込みが完了したら、カスタム イベント ハンドラーの登録を解除して折りたたみ可能なものを通常に戻し、最後に JavaScript から展開イベントをトリガーして開きます。

問題は、これが最初のラウンドで機能することですが、その後折りたたみ式がとにかく開きます。この例を考えてみましょう (これもjsfiddleにあります):

<div data-role="collapsible" id="c">
  <h2>Collapse</h2> 
  <ul data-role="listview" id="lv">
    <li>You don't see me!</li>
  </ul>
</div>

<a href="#" data-role="button" onClick="$('#c').off('expand', stop)">
  Unlock the collapsible
</a>

<a href="#" data-role="button" onClick="$('#c').on('expand', stop)">
  Lock the collapsible
</a>

JavaScript:

var stop = function(event) {
  alert('Locked!');
  event.preventDefault();
}

// executed after the element is created ...
$('#c').on('expand', stop)

ここで、ロード後に折りたたみ可能をクリックすると、閉じたままになります (良い)。ロック解除をクリックすると開き、アラートは表示されません (良い)。もう一度ロックすると、アラートが表示されますが (良い)、とにかく開きます (悪い)。

誰かが私が間違っていることを教えてくれますか? ロック解除による目に見えない副作用があるようです。ここにはいくつかの同様の質問がありますが、ほとんどの人は、拡張を再開せずに拡張を防止するだけで満足しています.

だから私の質問は次のとおりです。折りたたみ式の拡張を確実に遅らせる最良の方法は何ですか?

編集:リストビューロジックを統合し、このエラーも表示する別の例を追加しました。jsFiddle はこちらです。.one()また、登録解除をより追跡可能にするために移動しました。

新しい JavaScript:

var stop_n_load = function (event) {
  alert('stop opening! (or at least try to ...)');

  // try to stop the expanding by stopping the event
  event.preventDefault();

  // Do some work that takes time and trigger expand afterwards ...
  setTimeout(function (e) {
    dd = new Date();
    $('#lv').empty();
    $('#lv').append("<li><a href='#'>Item A ("+dd+")</a></li>");
    $('#lv').append("<li><a href='#'>Item B ("+dd+")</a></li>");
    $('#lv').listview('refresh');

    // when done, start expanding without this handler (was register only once)
    $('#c').trigger('expand');
    // for the next collapse register stop_n_load again
    $('#c').one('collapse', reset);
  }, 2000);
};

var reset = function (event) {
  $('#c').one('expand', stop_n_load);
};

$('#c').one('expand', stop_n_load);

最初の拡張では期待どおりに動作し、最初に更新してから開きます。2 回目の実行では、待機せずに開きます。後でタイムスタンプが更新されるのを確認できるため、イベントが適切に呼び出されます。

.preventDefault()わからないという問題があるようです...

4

3 に答える 3

1

私はJQMに精通していませんが、最初に考えたのは、追加のデータを送信する前にリストを空にすることでした....これは、リストの拡大を妨げているようです.

var stop = function(event) {    
    $(this).find('.ui-listview').empty()
    event.preventDefault();

    /* do ajax and then refresh component with expand enabled */
}

$('#c').on('expand', stop);

デモ - ajax なし

于 2013-11-03T01:59:09.170 に答える