0

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

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

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

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

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

请查看此示例以进行说明：

 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 时，是否有回调或方法开始加载数据，所以目标容器的可用性？

4

2 回答 2

0

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

我正在模拟一个 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) function - 让我们看看我的问题是否可以通过使用这个函数和 pageload 事件来解决（如果你可以使用相同的 options 参数，我在文档中找不到pageinit 事件）...

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

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

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

问题 ：

1) pageinit 事件是否处理与 pageload 事件相同的“选项”参数？

2）如何将“选项>数据”参数设置为json对象并在页面加载事件中正确访问其内容？

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

于 2013-02-15T11:46:29.457 回答
0

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

我相信在你的情况下，你所追求的事件就是pageinit事件。

于 2013-02-14T16:29:33.967 回答