HTML動態內容神祕disapperars

我目前正在使用Monaca，科爾多瓦和Onsen-UI的混合移動應用程序，但我的問題似乎更多的JavaScript相關。HTML動態內容神祕disapperars

我想動態地創建項目列表。對於這個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(''); 

};

這可以作爲一個魅力，我也得到產生充滿項目我一直在存儲名單，結果如下： 現在，這裏是扭曲！ 我翻遍了另外幾頁，返回到這個頁面，無處不在，我的列表是空的。我認爲，不用擔心，讓我們看看發生了什麼。由於我的名單似乎沒有內容，使用jQuery我日誌列表的內容：

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

，其結果如下：這樣看起來，我查詢的名單應該有預期的內容。但是，當我檢查的元素，它確實顯示爲空：

我根本無法滿腦子都在這個大錯。我非常感謝來自更多熟練程序員的幫助！提前致謝。

來源

2017-01-14 D. Kuki

我認爲問題出在您填寫列表以及如何瀏覽頁面。如果您沒有在包含它的頁面初始化時填寫列表，那麼當您返回到此頁面時可能會創建一個新頁面。因此，舊的頁面仍然與填充列表一起存在，正如您的日誌所說的那樣，但當您回到頁面時，您正在查看一個新的頁面，其中當前列表不是新的。

我的建議是在頁面初始化時調用該函數（請參閱下面的代碼片段），或發佈更多關於如何在頁面中移動以查看問題的詳細信息。

在頁面初始化函數調用：ONS-導航：

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

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

來源

2017-02-22 06:37:16

的問題是由模式，通過頁面移動引起的。我糟糕的管理了一堆頁面，這導致了這個意外的錯誤。重置ons-navigator的頁面堆棧之後，所有東西都應該如此。

感謝大家花時間在這個問題上。

來源

2017-05-10 18:47:13

HTML動態內容神祕disapperars

回答

相關問題