JQM 1.4.1: The new event 'pagecontainershow'

问题

I got confused with JQM changes:

As you may know JQM deprecated the event:

$(document).on('pageshow', '#MyPage', function(){

and replaced it by:

$(document).on('pagecontainershow', function (e, ui) {

However this new event is not attached to an specific page as the previous was. Nevertheless, the event:

$(document).on('pagecreate', '#MyPage', function(){

is still attached to a specific page, and i think other pages events are still attached to specific pages.

MY QUESTION IS:

The fact that some events are attached to pages and other no, makes the framework very confusing. Should'nt be better to standarized all events as the version 1.3 was in which all were attached to pages?

Will the event 'pagecreate' and all pages events be dettached to pages in the future as 'pageshow' is now in version 1.4.1

Can someone please explain how events work in 1.4.1

Thanks

回答1:

I just resolved the issue of pagecontainershow not being able to attach to a PAGE by using a "switch case" sentence like this:

$(document).on('pagecontainershow', function (e, ui) {

var ThisPage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');

  switch(ThisPage){

    case 'Page1':

    case 'Page2':

    case 'Page3':


etc....

However my concern is that if they modify the framework to support (back again) the event attached to pages, then I should be doing rework and rework.

回答2:

Here's some code based on the previous response I wrote that made my converting JQM 1.3 code in my HTML files easier after finding that the issue about this that Omar posted was closed as not a bug:

function setPageContainerHandlers(){
    function getPageContainerEventHandler(action){
        var handler = function(e, ui){
            var id = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
            var f = window.page_handlers[action]['#' + id];
            if ('function' == typeof f){
                f(e, ui);
            }
        }

        return handler;
    }

    var events = ['pagecontainershow', 'pagecontainerhide', 'pagecontainerbeforeload', 'pagecontainerbeforeshow', 'pagecontainerload', 'pagecontainerloadfailed', 'pagecontainerchangefailed'];
    var actions = ['pageshow', 'pagehide', 'pagebeforeload', 'pagebeforeshow', 'pageload', 'pageloadfailed', 'pagechangefailed']

    for(var i = 0; i < events.length; i++){
        var handler = getPageContainerEventHandler(actions[i]);
        $(document).on(events[i], handler);
        window.page_container_handlers[events[i]] = handler;
        window.page_handlers[actions[i]] = {};
    }
}

function registerPageHandler(id, action, handler){
    window.page_handlers[action][id] = handler;
}

Then, as long as setPageContainerHandlers() is called in a <script> tag in the document head,

$("#results").on("pagebeforeshow", initResults);

becomes

registerPageHandler("#results", "pagebeforeshow", initResults);.

回答3:

How about just checking for the current page and exit the event if not the one you want? That way, you can use separate functions as "normal".

$(document).on('pagecontainershow', function (e, ui) {
    if (ui.toPage[0].id != "YOUR_PAGE_1") return;

    //Do you stuff for YOUR_PAGE_1 here
});

$(document).on('pagecontainershow', function (e, ui) {
    if (ui.toPage[0].id != "YOUR_PAGE_2") return;

    //Do you stuff for YOUR_PAGE_2 here
});

来源：https://stackoverflow.com/questions/21801315/jqm-1-4-1-the-new-event-pagecontainershow

标签

jquery-mobile