Migration von jquerymobile 1.2.1 bis 1.4.5

Question

Ich bin die Migration von jquerymobile 1,2 bis 1.4.5

der Inhalt für jede meiner Seiten auf meiner app beginnt mit folgenden Syntax,

$("#DemoAccountRegistrationPage").live("pageshow", function() { 

ich konnte ich die .live den Übergang müssen, um herauszufinden, .on so wird die über jeder Seite Referenz

$("#DemoAccountRegistrationPage").on("pagecontainershow", function() { 

jedoch merke ich, dass das oben genannte Format für 1.4.5 noch nicht kompatibel ist daher, warum die co ntent nicht

Laden

kann mir bitte jemand die korrekte Syntax liefern, um mit

$("#DemoAccountRegistrationPage").on("pagecontainershow", function() { 

auf die korrekte Syntax für die Einhaltung ändern 1.4.5

ich über die jquery docs gelesen haben, aber kann nicht vollständig verstehen, was die richtige Syntax sein muss (sehr neu zu jquery mobile)

Answer 1

Die jQuery-Dokumente sind überhaupt nicht sehr klar, aber in Kürze, pageshow wurde in JQM 1.4.0 für die Verwendung veraltet pagecontainershow auf der pagecontainer widget.

Ich konnte etwas arbeiten, indem ich den pagecontainershow Listener zu document hinzufügte, dann die Argumente überprüfend, um herauszufinden, ob es der Seite entsprach, die ich wollte; so etwas wie dieses:

$(document).on('pagecontainershow', function(event, ui) { 
    if(ui.toPage[0].id == "my_page_id"){ 
     // do some stuff for my_page 
    } 
}); 

Ich habe versucht, es ein bisschen mehr wiederverwendbar zu machen, wie folgt aus:

function on_pagecontainershow(page_id, fn){ 
    $(document).on('pagecontainershow', function(event, ui) { 
    if(ui.toPage[0].id == page_id){ 
     fn(); 
    } 
    }); 
} 

on_pagecontainershow('test_page', function(){ 
    alert('pagecontainershow triggered'); 
}); 

Syntaxes ich versucht und sind gescheitert anzuschalten:

$(document).on('pagecontainershow', '#test_page', function(event, ui) { 
    alert("I don't get called (1)"); 
}); 

$(document).delegate("#test_page", "pagecontainershow", function() { 
    alert("I don't get called (2)"); 
}); 

$("#test_page").on("pagecontainershow", function() { 
    alert("I don't get called (3)"); 
}); 

Sie können versuchen, es heraus in this fiddle.

Answer 2

Dies funktioniert für mich, wie ich es in einem meiner Projekte bin mit:

$(document).on("pagecontainershow", function(e, ui) { 
    var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id"); 
    if (typeof ui.toPage == "object") { 
     /* manipulate page navigating to */ 
     switch(pageId) { 
      case "page-one": 
       //do stuff 
       break; 
      case "page-two": 
       // do other stuff 
       break; 
     } 
    } 
});