Question

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

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

当用户导航并手动使用changePage（'page.html'）处理用户交互时，我使用href =“page.html”将页面动态注入DOM。

所以，就我而言，在那些使用服务器数据的网页上我需要：

将新页面加载（注入）到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'));
    }

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

**请注意：

使用multipage模型和changePage（'＃target'）工作
使用setTimeOut（）进行测试并强制数据加载循环等待也可以，但我认为这不是最佳的，也不是一个良好的开发实践

问题：只有在新页面完全注入DOM时才会有回调或方式开始加载数据，因此目标容器的可用性是什么？

Answer 1

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

我相信你所追求的事件是pageinit事件。

Answer 2

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

我正在模拟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（））。我只需知道需要哪个页面并传递相应的数据。就是这样。

现在，增加这种复杂性，更多地添加用户，用户个人资料，用户提要和评论......它可以很容易地成为一个10页的应用程序。

这就是为什么我决定使用单页文档来维护“干净”的应用程序结构，以便将来添加新功能变得容易。

pageinit事件 - 必须将其放入相应的页面并始终触发一个功能。但是，正如我之前所说，有时它是一个简单的导航情况（直到JQM navBar），有时我管理请愿，这是我需要从服务器添加数据。

盘口。如何知道我们在哪种情况？

$ .mobile.changePage（'to'，options）函数 - 如果我的问题可以通过使用这个函数和pageload事件来解决（如果你可以使用它，我无法在domumentation中找到） pageinit事件的options参数）...

reloadPage＆gt;可以在需要新数据时设置为true，尽管我不知道JQM框架将要做什么甚至在功能方面意味着什么...

数据＆gt;我真的需要能够将其设置为json对象。但我还没有完成这项工作......

我希望我现在解决的问题非常清楚。

问题：

1）pageinit事件是否处理相同的'options'参数 pageload事件？

2）如何设置'选项＆gt;数据'参数到json对象并正确访问其在pageload事件上的内容？

3）reloadPage = true究竟需要什么？

仅当页面注入dom中时才添加内容vía回调

2 个答案: