javascript - HTML 动态内容神秘消失

Question

我目前正在使用 Monaca、Cordova 和 Onsen-UI 开发混合移动应用程序，但我的问题似乎与 javascript 更多相关。

我想动态创建项目列表。为此，我创建了简单的页面模板，以下是关键部分:

<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>

此代码片段背后的想法是以某种方式获取数据，并为每个对象获取脚本部分，用实际数据替换变量部分并将其插入到 transaction-list 元素中。该逻辑是使用以下 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'));

结果如下: 看来我查询的列表应该有预期的内容。但是当我检查该元素时，它确实看起来是空的:

我实在无法理解这个错误。我真的很感谢来自更熟练的程序员同事的任何帮助!提前致谢。

Answer 1

我认为问题在于您何时填写列表以及如何在页面之间移动。如果您没有在包含该页面的初始化时填写列表，则当您返回此页面时，您可能实际上正在创建一个新页面。因此，正如日志所示，旧页面仍然存在，并包含已填充的列表，但当您返回页面时，您将看到一个新页面，其中当前列表不是新的。

我的建议是在页面初始化时调用该函数(请参阅下面的代码片段)，或者发布有关如何浏览页面以查看问题的更多详细信息。

在页面初始化时调用函数:

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

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