V5 to v6 migration: async route events

1

Hi, we are migrating from v5 to v6. We have several js files that are out of the app, and are async loaded in this way:

app7 = new Framework7({
    el: '#app',
    routes: [
        {
            path: '/explorer/',
            async: function (context) {
                loadJS('app7-explorer.js', context);
            }
        },
    ]
});

function loadJS(url, context) {
    $.ajax({
        url: url,
        dataType: 'text',
        success: function (data, textStatus, jqXHR) {
            try {
                eval(data);
            } catch(err) {
                console.log(err);
            }
        },
    });
}

/*
Inside js file, the page is built with jquery and resolve is fired
*/
var $page = $('<div/>', {
    class: 'page',
});

var $navbar = $('<div/>', {
    class: 'navbar',
}).appendTo($page);

...

function pageInit(e, page) {
    // Fill controls
    ...
}

...

/*
This approach raise Cannot create property 'elm' on string error
(we cannot rewrite everything)
*/
context.resolve({ component: function (props, context) {
    context.$on('pageInit', pageInit);
    return () => context.$h`${$page[0].outerHTML}`;
}});

// With this approach we dont know how to attach to pageInit event
context.resolve({
    content: $page[0],
});

// The v5 way
resolve({
    component: {
        render: () => $page,
        on: {
            pageInit: pageInit,
        },        
    }
});

Best regards,
Jorge

2 
// With this approach we dont know how to attach to pageInit event
context.resolve({
    content: $page[0],
});

can be done as:

context.resolve(
  {
    content: $page[0],
  },
  {
    on: {
      pageInit: pageInit
    }
  }
);
3

Works like a charm Vladimir. It would be useful to add the on parameter to this documentation: Routes | Framework7 Documentation

Thank you!