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

回答

相关问题