3. Using ons-template as reusable partials?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Using ons-template as reusable partials?

  • C

    I am creating a “multistep” registration form with OnsenUI 2 using a page for each “step” and I find myself keep repeating the ons-toolbar component on each page (it always contains the same content for all the pages).

    Is there a way to create an ons-template element 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”…

    0 1 Reply
  • T

    • 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’

    1
  • Onsen UI

    @claudioc We plan to add more functionality to ons-template since 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>

    Demo

    The only drawback of this approach is that you cannot use ons-back-button component 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.

    0
    C
     1 Reply
  • C

    @Fran-Diox Oh, the navigator inside a page. This is quite a cool idea. Matrioska!

    Thanks

    0