HTMLの動的コンテンツ不思議な発見

Question

現在、Monaca、Cordova、Onsen-UIを使用したハイブリッドモバイルアプリケーションで作業していますが、私の問題はJavaScriptに関連しています。

アイテムのリストを動的に作成したいと思います。このpurpouseのために、私はシンプルなページテンプレートを作成し、ここで重要なセクションです：

<ons-list id="transaction-list"></ons-list> 

    <script id="transaction-list-item" type="text/template"> 
     <ons-list-item class="transaction-item-detail" > 
      <div class="left transaction-party">{{name}}</div> 
      <div class="center transaction-amount">{{amount}}</div> 
      <div class="center transaction-state" style="margin-left: 1em">{{state}}</div> 
      <div class="right"> 
       <ons-icon icon="ion-chevron-right"></ons-icon> 
      </div> 
     </ons-list-item> 
    </script> 

このコードスニペットの背後にある考え方は、何らかの形でデータを取得し、各オブジェクトのスクリプト部分を取り、実際のデータと変数部品を交換することであり、 トランザクションリスト要素に挿入します。このロジックは、以下のJavaScript関数使用して実装されています

function showRequests() { 
    var requests = storage.requests; 
    document.querySelector('#transaction-list').innerHTML=requests.map(function(item){ 
     return document.querySelector('#transaction-list-item').innerHTML 
      .replace('{{amount}}', item.amount).replace('{{name}}', item.reciever[0].fullName) 
      .replace('{{state}}', item.state.stateName); 
    }).join(''); 

}; 

これは、魅力として動作し、私は私がストレージに保つアイテムでいっぱい一覧を生成されます、結果は以下の通りです： を今ここにねじれが来ます！ 私はいくつかの別のページに行き、このページに戻って、どこにも私のリストは空です。心配する必要はないと思います。

 console.log(document.querySelector('#transaction-list')); 

と結果は以下の通りです：：私のリストは、私は、リストの内容をログにjQueryを使用して、コンテンツずに思えるので これはそう、私は照会リストが予想されるコンテンツを持っている必要があること。私は要素を検査する場合しかし、本当に空に表示されます。

私は単純にこの失態のまわりで私の頭をラップすることはできません。私はもっ​​と熟練した仲間のプログラマーの助けに本当に感謝します！前もって感謝します。

Answer 1

あなたがリストに記入し、ページをどのように移動するかが問題です。 これを含むページの初期化時にリストに記入しないと、このページに戻ると実際に新しいものを作成している可能性があります。したがって、あなたのログが言うように、古いページはまだ塗りつぶしリストに存在しますが、あなたのページに戻ると、現在のリストが新しいものではない新しい1ページが表示されます。

私のアドバイスは、ページの初期化時に関数を呼び出すか（以下のスニペットを参照）、ページをどのように移動して問題を表示するかの詳細を投稿することです。

ページの初期化に関数を呼び出す：アドオン・ナビゲーター：

document.addEventListener('init', function(event) { 

     if(event.target.matches('#page_id')){ 
     showRequests(); 
     } 
}); 

Answer 2

問題は、ページ間を移動するためのパターンによって引き起こされました。私はページのスタックをうまく管理していなかったため、この予期しない障害が発生しました。 ons-navigatorのページスタックをリセットすると、すべてがロードされます。

この問題で時間を過ごしていただき、ありがとうございます。