migrate from jquerymobile 1.2.1 to 1.4.5

问题

I am migrating up from jquerymobile 1.2 to 1.4.5

the content for each of my pages on my app commences with the following syntax,

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

I have been able to figure out i need to transition the .live to .on so the above becomes each page reference

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

however i realise that the above format is still not compliant for 1.4.5 hence why the content is not loading

can someone please provide me the correct syntax to be able to change

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

to the correct syntax for compliance with 1.4.5

I have read over the jquery docs but cannot fully understand what the correct syntax needs to be (very new to jquery mobile)

回答1:

The jQuery docs are not at all very clear on this, but in a nutshell, pageshow was deprecated in JQM 1.4.0 in favour of using pagecontainershow on the pagecontainer widget.

I was able to get something working by adding the pagecontainershow listener to the document, then inspecting the arguments to figure out if it matched the page I wanted; something like this:

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

I tried to make it a bit more reusable, like this:

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 I tried and failed to get working:

$(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)");
});

You can try it out in this fiddle.

回答2:

This works for me, as i'm using it in one of my projects:

$(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;
        }
    }
});

来源：https://stackoverflow.com/questions/38504611/migrate-from-jquerymobile-1-2-1-to-1-4-5

标签

ios

cordova

jquery-mobile