1

我正在使用 jQuery Mobile 和 PhoneGap 建立一个移动应用程序。我想要做的是，当我单击 ID 为“news_link”的链接时，我希望 jQuery 从数据库中获取数据并将其放入 jQm 的可折叠集。在我的解决方案中，我想在回调函数中使用 $.mobile.changePage，因为我想等到数据被提取并放入容器中，然后代码更改页面。这是代码：

$(function() { 
  $('#news_link').click(function(){
    loadNewsFromDB(function(){
       $.mobile.changePage( $("#news"), { transition: "slideup"} );
    });
});

loadNewsFromDB 是 PhoneGap 的 SQLite 数据库函数，它可以从数据库中获取具有更多回调函数的数据。内容将使用 .html-function 放入所需的容器中

function loadNewsFromDB(){
//some code here
theDB.transaction(function(tx) {
    tx.executeSql(sqlStr, [], onLoadNewsSuccess, onLoadNewsError);
},onTxError, onTxSuccess);

function onLoadNewsSuccess(tx, results){
    //some code here
    $("#newsSet").html(htmlCodeAndContentToPut);

Html 是 jQm 的基本 ui 模块：

<!-- some html code here --!>
<div data-role="page" id="news">
    <div data-role="content">
        <div id="newsSet" data-role="collapsible-set" data-mini="true">

通过调试，我知道代码可以正常运行，直到它到达 $.mobile.changePage-function 为止。不知何故，它不会改变页面。我已经检查过它在其他情况下运行良好的函数，但在回调函数中却没有。

如果有人帮助我，我将非常感激我是否没有看到明显错误的东西或更具体的东西？从 SQLite 获取数据、等待获取数据、将数据放入容器然后更改页面还有哪些其他解决方法？

4

2 回答 2

0
  • 我从来没有遇到过$.mobile.changePage来自Ajax的回调函数问题，因此可以从回调函数更改页面
  • 您loadNewsFromDB使用函数作为参数调用该函数。但我看不到您在函数本身
    的何处/如何使用此参数。loadNewsFromDB您不必在loadNewsFromDB函数上定义参数吗？
    定义回调函数后，您应该在数据准备好时调用它。
  • 我会尝试$.mobile.changePage直接在你的onLoadNewsSuccess函数中使用。

我相信代码应该是这样的：

function loadNewsFromDB(callback){
//some code here
theDB.transaction(function(tx) {
    tx.executeSql(sqlStr, [], function(tx, result) {
            ...some code here...;
            if (callback) {
                callback();
            }    
        },onLoadNewsError);
},onTxError, onTxSuccess);

编辑：
回答评论中的问题：

  • 在您的代码中，您正在为事件$(function()添加侦听器 。$('#news_link').click
  • 在此侦听器中，您告诉 Jquery 调用loadNewsFromDB函数并将以下回调函数作为参数发送给它：function(){ $.mobile.changePage( $("#news"), { transition: "slideup"}.

发送回调函数是不够的，你应该在你的代码中使用它（调用它）。
为了使用它，我做了以下事情：

  • 现在更改了函数定义 ，它确实有一个新参数：（这是您可以用来回调回调函数的名称）。function loadNewsFromDB(callback)
    callback

  • 在您的loadNewsFromDB函数中，您正在调用该 transaction函数，并向其发送 3 个参数：内联函数、onTxError、onTxSuccess。
    您的内联函数只需调用该tx.executeSql函数并向其发送 4 个参数：sqlStr, [], onLoadNewsSuccess, onLoadNewsError.
    我更改了第三个参数。
    我没有调用onLoadNewsSuccess函数，而是内联编写了所需的函数

  • 在内联函数中，我检查了回调函数if (callback)
    是否存在，如果存在，我调用它！ 调用回调函数，应该改变页面...callback();
于 2012-09-03T20:18:54.770 回答
0

你的意思是在 changePage 触发之前？

然后使用pagebeforechange事件，该事件在changePage. 我正在使用这个：

  $(document).on( "pagebeforechange", function( e, data ) {
  // do stuff
  console.log( e )
  console.log( data )
  });

对于我所有的 changePage 重定向。该data对象将包含所有 changePage 参数（如 toPage、options.fromPage...），因此您几乎可以根据需要重新配置 changePage 调用。

编辑pushstate：还要注意如果启用此事件会触发两次。一个事件是由实际转换（在 hashChange 上）触发的，这将传递toPage你将要作为string. 第二个事件将由 pushState 触发，并将传递toPageas object。您可以通过检查以下内容来定义要做什么：

 typeof data.toPage == 'string'

编辑：在您的具体情况下，我会根据从数据库中获取数据所需的时间来preventDefault()选择原始文件。changePage最好从 pageBeforeChange 内部，当您加载数据后，preventDefault创建一个新的 changePage。有关更多信息，请参阅 JQM 文档中的此示例。trigger your database calltrigger

于 2012-09-03T20:34:38.780 回答