1ページのWebサイト（JQuery Mobile）：DOMで1ページの複数のインスタンスを管理する方法は？

Question

jquery mobileに基づいてソーシャルウェブサイトを作成しています。ページはAJAXを使用して動的にロードされ、DOMにキャッシュされます（jQMはこれを管理します）。私はサイト上にチャットシステムを持っています：ユーザーが連絡先リストページ（/ chat /）の名前をクリックすると、選択した連絡先が読み込まれた会話履歴を持つページ（/ char/msg /？u = user_name）。

問題：ユーザーが同じページの複数の（n）ユーザーとチャットしている場合、会話ページのインスタンスがn個ロードされてDOMに保存されます（/ chat/msg /？u = user_1、/ chat/msg /？u = user_2、...、/ chat/msg /？u = user_n）。会話ページ上の要素のIDは、必然的に競合し、チャット機能を壊すことになります。

IDの競合を避けるために会話ページをどのように管理する必要がありますか？他の会話ページに切り替えるときに、他の会話ページをすべて破棄することはできません - 私は会話間の高速切り替えをサポートしたいと思います。私はGmailとFacebookがそのような場合にランダムな一意のIDを割り当てていることに気づいたが、これはこれを実行するベストプラクティスである。私が利用できるパターンはありますか？そして、もっと簡単な解決法はありますか？

ありがとうございます。

Answer 1

これはjQuery Mobileに慣れているときの一般的な問題です。解決策は、複数の疑似ページで同じIDを使用している場合は、停止して代わりにクラスを作成することです。一意でない方法でIDを使用する要素に対して、id属性をclassに変更するのは簡単です。ここで

は一例です：

<div data-role="page" id="some-page"> 
    <div data-role="content"> 
     <ul class="page-list"> 
      <li class="first-list-item"></li> 
     </ul> 
     <a class="back-btn" data-role="button" href="#">Back</a> 
    </div> 
</div> 

あなたは、現在のページの戻るボタンを見つけるために$.mobile.activePage.find('.back-btn')を使用することができ、またはあなたが特定の戻るボタンをターゲットに$('#some-page').find('.back-btn')を使用することができます。

私の提案は、セレクタのユニークな部分としてページIDを使用し、さらに各ページが同じ構造を持つように、より具体的なものにクラスを使用することです。これにより、再利用可能なコードを書くのに役立ちます。

Answer 2

$ .mobile.activePage経由で現在のページへの参照があります。セレクタは現在のページからルートとして検索する必要があります。 $ .mobile.activePage.find（ '＃myElement'）

また、pageinit/pageshowを正しく使用して、onリスナーを正しくバインドする必要があります。その場合は、現在のページも参照してください。私はそれが助け場合にこれを追加したい

編集 思想：https://stackoverflow.com/a/9085014/737023 これは私が複数のページとIDの競合を処理するために管理している方法です、私はあなたにも真のDOMのキャッシング=を使用していると仮定？私はそれで働いたことはありませんが、新しい問題はないはずです。