How should I code ons-splitter over several pages

[yuyaogawa]

I want to put ons-splitter to some pages. But I dont want to code same codes to different html. How should I code ons-splitter over several pages?

[munsterlander]

@yuyaogawa This may not be necessary. What is your navigation stack going to look like? Basically, what is your workflow as you may be able to use other components or methods to accomplish the same task at hand?

[IliaSky]

@yuyaogawa - as @munsterlander mentioned - you should think about how your navigation tree/stack will look like. Without further description help from our side may end up misleading if we don’t have a correct grasp of the situation. There is always a way, but finding it is easier with specifics :P

If lets say you have 7 pages, 3 of which will have the same menu (ons-splitter-side) then maybe you could view this as having only 5 pages, one of which has 3 states. What I mean is you could have only one page with that specific splitter and then simply change the page of the ons-splitter-content.

Now there are many more options on how you could do this, but they would depend on the navigation logic of your app. Just remember that if something is giving you trouble to code it, chances are your users may also have a hard time with the navigation.

Simple is better than complex. - 3rd rule of The Zen of Python

Also note that while you may be able to write some javascript which does some magic behind the scenes, not everyone would view that as the best solution. It depends on how much you value keeping things DRY vs simple.

And in case what you meant was how to keep the same code for the side menu - both the content and menu can be used in two ways - you can either put the contents inside the tags themselves or use the page attribute.

So you can have say:

<ons-splitter>
	<ons-splitter-side page="menu.html" other-attributes></ons-splitter-side>
	<ons-splitter-content>
		<ons-page>
			...
		</ons-page>
	</ons-splitter-content>
</ons-splitter>

So maybe this amount of html won’t be too much to replicate. I put it here to show that you don’t need to replicate the contents of the menu itself.

I guess from here it wouldn’t be hard to just make a function which takes a page name returns this html only changing the page attribute of the content. If that is what you meant and you still need help feel free to tell us. Just note that if it doesn’t work from the first time it may be safer to stick with the normal approach.

Also what I said here is based on speculation on what you may want. So if there is a misunderstanding try to explain your situation and needs in more detail. (^_^)

[Fran Diox]

@yuyaogawa If the splitter is going to be common to multiple pages I guess you can use it as the parent/root component. Then maybe you can add a navigator in the content. Check this tut if you think this could help you.