Open cyclops24 opened 8 years ago
add some global trigger here: https://github.com/MeteorDemoApps/OnsenUI2JS-demo/commit/be29cd85d9bd75983c3eb680851a12e3eb382330
@frankdiox do you have any suggestion for me about this task?
Guys, I need you opinion about this. What is the best way to add OnsenUI navigator transition to FlowRouter trigger?? I need to know best practice and others approach.
@cyclops24 Hey! Some time ago I wrote an article about integrating Onsen UI v1 with Angular's ui-router. The navigator in Onsen UI v2 is almost the same, just a bit simpler. I think you can find something useful here.
Basically I used onEnter
event and similar, so probably your approach with triggersEnter
and triggersExit
works.
We've been talking in the team about separating the animations from state changing in the navigator so theoretically you can call the animations from outside, but this is obviously not done yet and it may take time, if we ever implement it :sweat_smile:
@frankdiox I think mixing OnsenUI navigator with Meteor FlowRouter will be a bit complicated because triggersEnter
called before page render and at that time Navigator
not created yet and it's make error that I asked in OnsenUI forum from other hand we have a OnsenUI template as ons-template
that will be placed under Meteor template as template
like below and I think it's a little dirty way:
<template name="index">
<ons-template id="index">
...
If animation separate from navigator then any frameworks can use own router approach and all things become more simpler. Are you (OnsenUI team) want to separate this for version 2 ?
@cyclops24 Version 2 is already in release candidate so we won't do anything else for 2.0.0. This may or may not come for 2.1. In any case, I think most of mobile apps are quite simple in general and they just need basic routing (like ons-navigator
provides). Is there a way to use this without FlowRouter? I don't really know too much about Meteor or Blaze :/
@frankdiox Oh man, You say another approach :+1:
Maybe we can completely remove FlowRouter and use ons-navigator
at all.
If ons-navigator
fit to my needs I can simply remove FlowRouter.
I test and say result here. Thanks for new idea :wink:
@frankdiox I try below code but it always show second page by default that it's wrong.
<ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-page id="page1">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button id="push-button">Push page</ons-button>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page id="page2">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center"></div>
</ons-toolbar>
<p>This is the second page.</p>
</ons-page>
</ons-template>
This is exactly same as OnsenUI docs example. Do you have any idea about this?
@cyclops24 The second page? Is anything triggering a pushPage? What happens if you actually remove the second page and only have the first one?
Hi @frankdiox , Yeh second one, it seems it's always show the last page. For example if only one page, it show first page and if I have three or four page it's show last one always. I still haven't any pushPage. Frank you can see my code here: https://github.com/MeteorDemoApps/OnsenUI2JS-demo/blob/358ec78a3d502142cbb9167fe78eb78d2656be50/imports/ui/pages/testNavigator.html
If you have time also you can see it yourself. Just run curl https://install.meteor.com/ | sh
then clone this repo and run simple meteor run
command to see issue on http://localhost:3000/
.
I don't really know how template
works in meteor. ons-template
must be part of index.html
at the beginning of the app, otherwise it does not work. ons-template
is just a handy way to create new content within index.html
, but you can put those pages in different files by just removing ons-template
tags. When you want to push a page you use the path of the file. Let's say you have www/index.html
and www/views/page1.html
, then you use pushPage('views/page1.html')
.
Other things that you can try is to put the first ons-page
directly inside ons-navigator
tags. I think that works well for the very first page.
Another thing, you can directly push HTML since pushPage
-like methods accepts a parameter options.pageHTML
. Therefore, if you want you can use your normal template
tags with pages as long as you pass the content in that parameter. I think we will be changing ons-template
related stuff in the core soon in order to make all of this easier.
I hope you can find some useful information here!
@frankdiox is any complete list of component demo exist for OnsenUI 2? Something like this for Meteoric124 (Blaze version of Ionic 1.2.4): http://meteoric-demo.com/ If OnsenUI have something like this then I can port it to Meteor and I think it's prevent many of issues and conflicts between both side.
Now anything works well but 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.
Based on @johncodesigns help I want use triggers:
Related to this link: https://github.com/kadirahq/flow-router#triggers