Avoiding complex routing to accommodate the back button


#1

Hello devs,

Imagine you have an app with an index of stories:

/stories

And from that list of stories you can view the authors profile:

/stories/user/1/

And from there you can view a story from that user

/stories/user/1/story/1

This feels reasonable, and defining states for this possible hierarchy is fairly simple, and works with the back button. Taking this one step further, imagine you can click a comment on the story and go to the commenters list of stories. For the back button to return you to the previous interface you need to nest another state like:

/stories/user/1/story/1/user/2

Things get hairy from here. I’m sure you can image a situation where you would need to nest states indefinitely.

Is nesting states the only way to get the ionic back button to work? Are there other approaches I should be looking into?

Regards,
Jonathan


#2

This gives you control on the navigation.
http://ionicframework.com/docs/api/service/$ionicHistory/
See if it helps.


#3

If you have 3 views with changing content (as I assume you do), when you go from the home:

/stories/

to a profile:

/stories/user-1/

to his story:

/stories/user-1/story-1/

if from that state you go to another users profile via comment, you should be back at:

/stories/user-2/

for the router, you just went back. As in, if you hit back, you are back at home.
Different parts of the profile can be other states, but on this case, the stories are the same state that is only reachable from the users profile. So, if you want to go to another story from the same user, you go back to his profile, select another, and you load the same state, changing the content to the second story.

If you want to “save” where he came from, as in have him be able to go back to user1’s story from user2’s profile, you could set a button specifically for that. You could stack the “history” manually as you see fit saving the id’s in a service for example.

Did I get you wrong?


#4

Are you thinking I would change the behavior of the back button by calling this directly? Or is there some way to manipulate the history with this service?


#5

I think you go it right. How would you stack the history manually? In the source for $ionicHistory I see you can fetch the history like:

var viewHistory = $ionicHistory.viewHistory();

Manipulating that history looks a bit hairy. Is that how you’d go about it?


#6

If I were to do it manually I would push the id’s of the user/story in an array.

You could check it’s length if you want a limit to the history stack, when you go back you just delete the last one etc. I’m sure there is a much better way with what you say, but your pages aren’t “standalone” as the state doesn’t change even tho their content does, you still would have to use the view caching (at least I see it that way).

I personally would just save the id’s and I would cache the petitions so the client doesn’t have to download the same twice if itś in his history, I would disable cached views and I would “link” the cache with the custom history stack, the cache would have a ttl and I would maintain the cache at least until the ttl expires AND as long as they are in the history stack, so you delete the cache if it’s page has already been deleted from the history and enough time has passed.

I know all this needs quite the amount of work so it feels natural and that there’s a lot of problems at a basic level, I still hope some part of it is useful.