HTML динамический контент mysteriously dissapperars

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> 

Идея этого фрагмента кода, чтобы какой-то образом получить данные, и для каждого объекта принять участие сценария, замените переменные части с фактическими данными и вставьте его в Список транзакций элемент. Эта логика реализуются с помощью следующего яваскрипта функции:

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(''); 

}; 

Это работает как шарм, и я получаю сгенерированный список наполненного пунктов я держу в хранении, результат следующий: Сейчас здесь идет поворот ! Я просматриваю несколько других страниц и возвращаюсь на эту страницу, и из ниоткуда мой список пуст. Я не думаю, что не стоит беспокоиться о том, что происходит. Так как мой список кажется без содержания, с помощью JQuery я вхожу содержимое списка:

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

и результат заключается в следующем: Это кажется, что список переспросила я должен иметь соответствующее содержание. Но когда я проверить элемент, он действительно выглядит пустым:

Я просто не могу обернуть мою голову вокруг этой оплошности. Я бы очень признателен за любую помощь от более опытных программистов! Заранее спасибо.

Answer 1

Я думаю, что проблема заключается в том, когда вы заполняете список и как вы перемещаетесь по страницам. Если вы не заполните список при инициализации своей страницы, содержащей его, возможно, при возврате на эту страницу вы фактически создадите новую. Таким образом, старая страница все еще существует с заполненным списком, как говорит ваш журнал, но по мере того, как вы возвращаетесь на свою страницу, вы просматриваете новую страницу, где текущий список не является новым.

Мой совет - либо вызвать функцию при инициализации страницы (см. Ниже фрагмент), либо опубликовать более подробную информацию о том, как вы перемещаетесь по страницам, чтобы увидеть проблему.

Вызов функции на инициализации страницы:

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

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

Answer 2

Проблема была вызвана шаблон для перемещения по страницам: ONS-навигатор. Я плохо справился со стеклом страниц, что вызвало эту неожиданную ошибку. После того, как вы перешли на страничный стек ons-navigator, все загрузится так, как следует.

Спасибо всем за то, что они потратили время на эту проблему.