仅当页面注入到 dom 准备好通过回调时才添加内容答案

【问题标题】：add content only when page injection into the dom is ready vía callback仅当页面注入到 dom 准备好通过回调时才添加内容
【发布时间】：2013-02-14 16:24:08
【问题描述】：

我正在使用 JQM + Phonegap 开发一个应用程序。

为了避免设备减速和应用程序崩溃，我使用 JQM 单页导航模型，因为它允许自动 DOM 大小管理。

当用户导航时，我使用 href="page.html" 将页面动态注入到 DOM 中，并手动使用 changePage('page.html') 来处理用户交互。

所以，据我所知，在那些使用服务器数据的页面上，我需要：

将新页面加载（注入）到 DOM 以访问目标 div/容器
动态放置新数据（追加）

出于说明目的，请查看此示例：

 function loadData (myJSONObject){

    // inject page
    $.mobile.changePage('page2.html');

    //load data
    for(var i=0; i<myJSONObject.data.length;i++){
    name = myJSONObject.data[i].name;
    link = myJSONObject.data[i].description;

    // #listData is the target container from page2.html                    
    $("<a />",{
        text: name,
        href: link
        }).appendTo(                                                
            $("<li />",{
            id: name,
            }).appendTo('#listData'));
    }

此代码导致一个空列表，因为由于 javascript 异步行为，JQM 页面注入函数比加载数据花费的时间更长

**注意：

使用多页模型和 changePage('#target') 工作
使用 setTimeOut() 进行测试并强制数据加载循环等待也可以，但我认为这不是最佳的开发实践

问题：是否只有当新页面完全注入 DOM 时才开始加载数据的回调或方法，所以目标容器的可用性？

【问题讨论】：

查看文档的事件部分：jquerymobile.com/demos/1.2.0/docs/api/events.html。由于您自己没有找到此页面，我建议您大致阅读文档。

标签： javascript events cordova jquery-mobile

【解决方案1】：

有几个 pageLoad 事件在从一个页面转换到下一个页面的不同阶段触发。这一切都很好地记录在这里：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

我相信在您的情况下，您所关注的事件是 pageinit 事件。

【讨论】：

【解决方案2】：

确实，我正在开发一个连接到网络服务的复杂应用程序。它是网络应用的移动版本。

我正在模拟一个 MVC 模型，因此每个页面都有自己的 controller.js、model.js、view.js 和一个 html5 页面（单页文档）。这就是为什么我使用 changePage('page2.html') 将页面注入 DOM，让 JQM 框架处理 DOM、后退按钮功能、转换...

当用户浏览页面时显示、隐藏或注入取决于是否需要新数据，或者它只是显示来自 DOM 的页面（隐藏->显示）以及最后一个数据和“刷新”按钮或向下滚动加载新数据功能。

请看一下这个例子：

想象一个用 3 页来发现新餐厅的应用。主页（显示您订阅的餐厅的最新消息）、餐厅（所有可用餐厅的列表）和 RestaurantProfile（信息和订阅/取消订阅按钮）。

所以，当用户点击列表中的餐厅时，我需要从服务器获取数据并从 RestaurantProfile.html 放入不同的目标包装器中，但首先必须将该页面注入 DOM，因为它不是可以将数据加载到隔离页面中，然后将其注入 DOM。这是不可能的。

我什至不知道该页面是否已经进入 DOM 或已被删除。这取决于 JQM 框架（如果需要，changePage() 会在之前执行 loadPage()）。我只需要知道需要哪个页面并传递相应的数据。就是这样。

现在，通过添加用户、用户个人资料、用户信息流和 cmets 来增加这种复杂性...它可以很容易地变成一个 10 页的应用程序。

这就是我决定使用单页文档的原因，以保持“干净”的应用程序结构，以便将来轻松添加新功能。

pageinit 事件 - 它必须放置在相应的页面中，并且总是会触发一个函数。但是，正如我之前所说，有时这是一个简单的导航情况（直到 JQM navBar），有时我管理请求，这就是我需要添加数据表单服务器的时候。

障碍。如何知道我们处于什么情况？

$.mobile.changePage('to', options) 函数 - 让我们看看我的问题是否可以通过使用这个函数和 pageload 事件来解决（如果你可以使用相同的，我在文档中找不到pageinit 事件的选项参数）...

reloadPage > 可以在需要新数据时设置为 true，尽管我不知道 JQM 框架还会做什么，即使它在功能方面意味着什么......

data > 我真的需要能够将其设置为 json 对象。但我还没有完成这项工作......

我希望我要解决的问题现在已经很清楚了。

问题：

1) pageinit 事件是否处理相同的“选项”参数页面加载事件？

2) 如何将 'options > data' 参数设置为 json 对象并在页面加载事件中正确访问其内容？

3) reloadPage = true 究竟意味着什么？

【讨论】：