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.

Use a Template Multiple Times to Push Pages (with different content)

  • Hi,

    • Onsen UI ver.: v2.10.0-build.5650
    • jQuery ver.: 3.3.1

    I need to create pages dynamically as in on-the-fly.
    I don’t know the content of those pages beforehand since I have no control over available options.
    All the pages are simple lists and they should give the user the opportunity to go back and alter the selection.
    Theoretically, it’s an infinite selection, btw; not in real life, though.

    Consider following scenario…

    For the User A the depth of selection is 3:
    – Point (a list of points)
    ---- Day (a list of days)
    ------ Hour (a list of slots)

    Whereas, for the User B the depth of selection is 5:
    – City (a list of cities)
    ---- Venue (a list of venues)
    ------ Point (a list of points)
    -------- Day (a list of days)
    ---------- Hour (a list of slots)

    Since I can’t possibly know the depth of selection beforehand, I need to create and push pages dynamically, on-the-fly, as I’ve stated before.

    How can I do this?

    I tried, of course, the standard way as

      $( '#kp-app-navigator' )[0].pushPage( 'list.html', { data: page_Data_As_Title_And_Available_Options_For_The_List } );

    Yet, as I understand, OnsenUI references the pages pushed into navigator by the name of template.
    That is, trying to update the content of newly pushed page actually updates the page behind and then everything goes haywire.

    So, is there a way using one template to push multiple pages into the stack with different contents?
    I assume that I’m not the only dev around who needed such a functionality.
    In fact, once I stumbled upon a Stackoverflow question about this, unfortunately I couldn’t find the link of it to reference here.

    Thanks for all your help and/or insights…


    ~ Ender

  • Onsen UI

    This should work by default. One of the navigator examples on the Playground shows this in use at patterns&module=navigator_tabbar. Notice how you can keep pushing the same page onto the stack in this example. That should be the same for your case, I think.

  • I’ve duplicated that piece of code and yes, it works as default which means there’s something wrong with my particular workflow (app design). That’s why I’m replying so late, by the way; I tried to fix it but just couldn’t figure it out how.

    Thanks for your help…