jQuery Mobile：如何在 $.mobile.changePage 之前运行回调函数？

Question

我正在使用 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-modules：

<!-- 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 函数为止。不知何故，它不会改变页面。我已经检查过它在其他情况下运行良好的函数，但在回调函数中却没有。

如果有人能帮帮我，我将不胜感激。我没有看到明显的错误还是更具体的问题？从 SQLite 获取数据、等待获取数据、将数据放入容器然后更改页面还有哪些其他解决方法？

Answer 1

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

我认为代码应该是这样的：

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

---

编辑：
回答 cmets 中的问题：

• 在您的 $(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();
  调用回调函数，应该改变页面...

Answer 2

你的意思是在 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 触发，并将toPage 作为object 传递。你可以通过检查来定义什么时候：

 typeof data.toPage == 'string'

编辑： 在您的特定情况下，我会 preventDefault() 原始 changePage 取决于从数据库中获取数据需要多长时间。最好从 pageBeforeChange 内部 preventDefault、trigger your database call 加载数据后，trigger 一个新的 changePage。有关更多信息，请参阅 JQM 文档中的 example。