phonon
phonon copied to clipboard
phonon-framework
$previous-page not storing params
I have a simple app with three views: list (#!/list) -> detail (#!/list/:id) -> review (#!/review/:id) and the detail/review views have back buttons that use $previous-page. The first time I navigate from list -> detail -> review and use the back button to get to the list, everything works correctly. Any attempt to do this navigation flow for any other list items does not work because the back button replaces the :id with the :id from the first navigation. So if I first navigate to :id=2, any time I hit the back button on the review or detail views, it will take be back to :id=2 event if the current :id was something else. I did some debugging and it appears that the onRoute function only checks the page name and only adds it with the params to history the first time the view is navigated to. Is my navigation flow unsupported or is this a bug? Thanks
Are you using others frameworks? Because Phonon we use #!list/12 (using your example to /list/:id)
Only riot, yes that is actually what my urls look like I just excluded it to keep the example simple. I edited the original question.
@John-Henrique Is this navigation flow unsupported with $previous-page? Or is there a different url structure that I should use to achieve something similar? I can provide a sample app if that would be helpful.
HI @rmdydo,
Thank you for sharing your case.
I am not sure to understand it perfectly, but I think it is better that you use changePage programatically or setting the active (current) id in your view model like the following:
<button class="button" data-navigation="list/{ currentId }">Back for { currentId }</button>
...
<script>
this.currentId = 0
var self = this
this.on('hashchanged', function(id) {
self.currentId = id
self.update()
})
</script>
As you say, Phonon takes the last route from history. Furthermore, I think that it is more interesting (and logical?) to work with Riot tags in order to achieve your app logic. For example, you will need to retrieve the current ID at anytime and this should be done with tags.
What do you think about nested tags?
<app> => contains global data
<view1> => contains data for view1 and inherits global data
<view2> => contains data for view2 and inherits global data
</app>
I just came across the same thing.
I browse to:
#!category/1
=> #!product/2.
Clicking back takes me to #!category/1.
If I go back home and browse to:
#!category/2
=> #!product/3
Clicking back takes me to #!category/1 at this point, instead of #!category/2
I'm not working with Riot or other framework; just Cordova + Phonon.
I'll try the way of storing the current category ID; that may be more useful anyway since I can return to the category from more than 1 page away (e.g. navigate all the way to the shopping cart, button to return to the category).
@Qathom Thanks, your solution works for me. However, from my perspective this behavior still looks like a bug and I would not naturally expect it to function this way. I would expect $previous-page to match the functionality of a browser back button and it does not currently do this. But my issue is resolved with your solution so its up to you to determine if this is in fact a bug or not. Thanks!
@Qathom Actually, your solution only works for an html back button but the Android native back button still goes back to the first page that was ever navigated to, same as @gRegorLove demonstrated as well.