Корректная регистрация событий в приложении PhoneGap + jQuery Mobile

Я пытаюсь определить правильный способ зарегистрировать как события инициализации (jQuery-style) для PhoneGap, так и jQuery Mobile в приложении для Android.

После изучения документации я придумал следующее:

$('#index-page').live('pageinit', function () { // <-- fires
    $(document).bind('deviceready', function () { // <-- !fires
        // ...
    });
});

"Внешнее" событие (pageinit) срабатывает, а "внутренний" (deviceready) не...

Хотя этот тип регистрации событий отлично работает:

window.addEventListener('load', function () {
    document.addEventListener('deviceready', function () {
        // ...
    }, false);
}, false);

Может кто-нибудь объяснить, что случилось с первым типом регистрации событий? Какой тип лучше?

Предпосылки:

  • PhoneGap v1.2
  • jQuery Mobile v1.0rc2
  • Eclipse v3.7.1

Ответы

Ответ 1

Пожалуйста, придерживайтесь последнего, потому что это рекомендуется PhoneGap, ваш первый подход, вероятно, не работает, потому что вы слишком долго связываете deviceready (то есть: он уже запущен перед вашей привязкой). То потому что pageinit уволен относительно поздно.

Что вы можете сделать, это способ jQuery:

$(window).load(function() {
    $(document).bind('deviceready', function () { 
        // ...
    });
});

Ответ 2

В этом случае я считаю использование отложенных объектов более чистым/безопасным. Это то, что я обычно делаю: 

var jqmReady = $.Deferred();
var pgReady = $.Deferred();

// jqm ready
$(document).bind("mobileinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready :)
$.when(jqmReady, pgReady).then(function () {
  // do your thing
});

Ответ 3

Я бы пошел дальше с примером Майкла и инициировал пользовательское событие JavaScript "PG_pageinit". Это произойдет после того, как оба события ( "pageinit", "deviceready" ) были запущены. Таким образом, вам нужно только изменить имя зарегистрированного события в ваших (уже написанных) внешних файлах JavaScript.

Итак, используя код Майкла (с незначительным изменением с события "mobileinit" на "pageinit" ):

var jqmReady = $.Deferred(),
pgReady = $.Deferred();

// jqm page is ready
$(document).bind("pageinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready, throw a custom 'PG_pageinit' event
$.when(jqmReady, pgReady).then(function () {
  $(document).trigger("PG_pageinit"); 
});

И в других файлах JavaScript, когда вы хотите зарегистрировать это новое событие, используйте это:

$(document).bind("PG_pageinit", function(){
  alert('PG_pageinit was just fired!');    
  // do your thing...
});

Протестировано на Android 2.3, cordova 1.9.0