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-function。不知何故，它不会改变页面。我已经检查过它在其他场合运行良好的功能，但不在回调函数内部。

如果有人愿意帮助我，我会非常感激我没有看到明显错误的东西或更具体的东西吗？还有什么其他的解决方法可以从SQLite中获取数据，等待获取数据，将数据放入容器然后更改页面？

Answer 1

我在回调函数上从未遇到过 $.mobile.changePage 的问题来自 Ajax ，因此可以从a更改页面回调函数
使用函数调用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函数和将以下callback-function作为参数发送给它：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。

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

2 个答案: