Add OnsenUI 2 transition for route change in Meteor and FlowRouter

cyclops24

Hi guys,
I try to mix Meteor 1.3 and FlowRouter with OnsenUI 2 Vanilla JS. I want add transition animation for route change. OnsenUI has this feature as this: https://onsen.io/v2/docs/js/navigation.html But I don’t now what is the best place for start mix OnsenUI and FlowRouter. Maybe a good point to start is a onAfterAction hook or something like this so I decide to use FlowRouter global triggers based on this: https://github.com/kadirahq/flow-router#triggers

This is my layout with navigator:

<template name="App_body">
    <body>
        <ons-navigator id="myNavigator"></ons-navigator>
        {{> Template.dynamic template=main}}
    </body>
</template>

this is my router.js:

FlowRouter.triggers.enter([enterPage]);
FlowRouter.triggers.exit([exitPage]);

function enterPage(context) {
    // context is the output of `FlowRouter.current()`
    console.log("enter new route");
    var options = {
        animation: 'slide' // What animation to use
    };
    var myNavigator = document.querySelector("#myNavigator");
    myNavigator.pushPage(context.route.name, options);

}

function exitPage(context) {
    // context is the output of `FlowRouter.current()`
    console.log("exit current route");
}

but it return below error:

TypeError: myNavigator is null

You can see complete code here for reproduce: https://github.com/MeteorDemoApps/OnsenUI2JS-demo

Just uncomment enterPage function commented lines.

munsterlander

@cyclops24 So I have not used Meteor, so forgive me, but that error is typical to the object not being loaded in the DOM. I would suspect that the call to the myNavigator object is happening prior to the template being fully loaded based on what you have listed. My guess is that although the call is for the enter event, the object itself has not propagated Have you tried calling the routine at a later point in the page lifecycle?.

Fran Diox

@cyclops24 As @munsterlander says probably the DOM is not ready. Perhaps the element has been created but it’s not attached yet to the DOM?
You can try to put that in a setTimeout just to see if it works.

cyclops24

@munsterlander and @Fran-Diox thanks for your attentions.
I’m not used react. I used vanilla version with Meteor framework.
Guys you right and as @Fran-Diox says I put my code in 'setTimeout` like below and error gone:

setTimeout(() => {
        var options = {
            animation: 'slide' // What animation to use
        };
        var myNavigator = document.querySelector("#myNavigator");
        console.log(myNavigator);
        myNavigator.pushPage(context.route.name, options);
    }, 1000);

But it’s not working now because triggersEnter called before page render :worried:
I think I need another approach.

munsterlander

@cyclops24 Apologies for saying react when I meant Meteor or pretty much any other JS framework out there!

So an option for you which is slightly unrelated, but similar in result: http://stackoverflow.com/questions/38202366/onsen-ui-postpush-event-callback-fires-multiple-times

Maybe try @IliaSky’s response for using init with target.id.

Fran Diox

@cyclops24 Now that I notice… Is there any reason why ons-navigator is inside a template? Shouldn’t it be part of the main body? I don’t know how Meteor works but if you make sure that the navigator is attached to the DOM it should work. I was actually thinking about pushing ons-page in triggersEnter and that may work, but the navigator must be there…

indesignlatam

The problem of using flowrouter and dynamic template is that the complete content of it is changed on route change or page change, so you wont have the previous page to animate over a new page.

You will have to have both templates or page loaded in the dom for the animation to work.

Fran Diox

@indesignlatam @cyclops24 Looks like Flow Router actually doesn’t render anything, so I guess it’s possible to integrate it with Onsen UI.

Anyway, here there is a simple app with Meteor and OnsenUI. Working in Heroku here.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Add OnsenUI 2 transition for route change in Meteor and FlowRouter