Using ons-template as reusable partials?
I am creating a “multistep” registration form with OnsenUI 2 using a page for each “step” and I find myself keep repeating the
ons-toolbarcomponent on each page (it always contains the same content for all the pages).
Is there a way to create an
ons-templateelement just for the toolbar and then reusing it over and over inside all the pages without the need to actually copy its content (you know, DRY).
Something like “partials”…
You could do an AJAX GET request to a local HTML file which contains the HTML template and set it as the contents of your header div via innerHTML or jQuery’s .html(). I’m using this method in my project without any issues.
I read a post somewhere by Fran Diox with a suggested workaround: add a navigator and setpage=‘template.html’
@claudioc We plan to add more functionality to
ons-templatesince right now is not as useful as it could be. For now you cannot use it as partials, but if your problem is the toolbar, you can leave the toolbar outside of your navigation frame. Something like this:
<ons-page> <ons-toolbar> ... </ons-toolbar> <ons-navigator ...></ons-navigator> </ons-page>
The only drawback of this approach is that you cannot use
ons-back-buttoncomponent normally since it needs to have a parent navigator.
We also plan to improve the back button to support this situation, but all of this have to wait after 2.0 is released.
Well, this is of course if you are OK with having a static toolbar without animation when changing pages.
@Fran-Diox Oh, the navigator inside a page. This is quite a cool idea. Matrioska!