Navigation with page modularity

[slowsword]

How would one go about making an ons-navigator page stack that can use different .html pages interchangeably with the ability to pass data between them?

I have a a sliding menu with individual page stacks, ons-navigator, for each of the pages in the slide menu. Each stack, in the slide menu, has its own ons-navigator with some number of pages that can be navigated to in the stack, while passing data from one to the next (think list of items, then click on an item to view the detail of said item).

The problem is when i want to use the same .html template in different navigators (different slide menu items) without having to recreate for each use case and pass data between them. I currently am passing data by accessing the page’s navigator by name, and getting the data from the previous page. But since the page in question can be used in different slide menu items (with a different ons-navigator), calling the navigator by name in the controller is not exactly modular (it would be hard coded with some switch for each case).

Example:

1. Two slide menu items: Car Manufactures list, and Car models list.
2. When in the car manufacture list, add page to stack and pass info on which manufacture was selected and show list of models, and then another page on stack to see car model detail.
3. When in car model list, click on car and view details (same .html as the one navigated to from car manufacture).

This is a simplified example of course.

Thanks!

[munsterlander]

@slowsword What you describe is exactly how the ons-splitter should work. Basically, create your menu which has your manufacturers. For the onclick event, have it call a function which passes the manufacturer. In this function you get all your models, push the models page to the current view, and pass your data to the display.

If you can give me a bit, I can probably throw together a codepen that demos this.

[slowsword]

That would be awesome if you could do that! In the mean time i’ll go dig into on-splitter and what would be required to upgrade to onsen v2.

Thanks!

[munsterlander]

@slowsword Please excuse the very basic demo: https://codepen.io/anon/pen/wWXrbL

This is utilizing the awesome tutorial.onsen.io site and adding to it a bit.

Although I pass limited data, you really could do a lot more, such as retrieval via JSON, utilize a promise to make it even more efficient.

Hope this helps.