Page

    Page is one of the main components (containers) used to display app content.

    As you may note, each page has a attribute with a unique page name. It’s not required but can be useful within “page events” or “page callbacks”. It can help us to define which page is loaded and available so you can make required manipulations to the page.

    Page Content

    All visual content (like list views, forms, etc.) should put inside of <div class="page-content"> which should be a child of <div class="page">. It’s required for correct styling, layout and scrolling.

    Lets see how we can use these events. There are two ways to add page event handlers:

    When a new page is loading and transitioned into the view (main visible part of the app) it has different classes on page element.

    When we load/open new page the following happens:

    1. Currently active page has **page-current** class.
    2. If page we load not in DOM (e.g. loaded via Ajax or using template or from component) it will be added to DOM.
    3. Router element (<div class="view">) will have additional **router-transition-forward** class that does the following:
      • page with page-next (new page) class moves into the view
      • page with page-current (current page) class moves out of the view
    4. After transition completed, the new page that we loaded will have **page-current** class
    5. And the page that was previously active will have **page-previous** class
    1. Currently active page has **page-current** class.
    2. If page we go back to not in DOM (e.g. loaded via Ajax or using template or from component) it will be added to DOM.
    3. Page that we go back to will have additional **page-previous** class set on its element.
    4. Router element () will have additional **router-transition-backward** class that does the following:
      • page with page-current (current page) class moves out of the view
    5. After transition completed, the new page that we returned to will have **page-current** class
    6. And the page that was previously active will have **page-next** class. In case this page was added to DOM dynamically, it will be removed from DOM.

    As you may see it is pretty easy, but how do you determine which page is loaded when we use only one handler? For this case we have Page Data in the event details:

    Or in case the event handler was assigned using Dom7 like in example above then it will be passed in second argument:

    Now, in the example above we have page data in **page** variable. It is an object with the following properties:

    page.appobjectInitialized app instance
    page.viewobjectView instance that contains this page (if this View was initialized)
    page.routerobjectRouter instance that contains this page (if this View was initialized). Same as page.view.router
    page.appstringInitialized app instance
    page.namestringValue of page’s data-name attribute
    page.elHTMLElementPage element
    page.$elobjectDom7 instance with Page element
    page.navbarElHTMLElementRelated navbar element for this page. Available only in iOS theme with dynamic navbar enabled.
    page.$navbarElobjectDom7 instance with related navbar element for this page. Available only in iOS theme with dynamic navbar enabled.
    page.fromstringPage position before transition or direction of where this Page comes from. It will be next if you load new page, previous - if you go back to this page, or current if this page replaces the currently active one.
    page.tostringNew page position or where this page goes to. Can be same next, previous or current
    page.positionstringAlias for page.from
    page.directionstringDirection of page transition (if applicable). Can be or backward
    page.routeobjectRoute associated with this page, object with current route data that was used to load this page. It has the following properties
    • url - route URL
    • path - route path
    • query - object with route query. If the url is /page/?id=5&foo=bar then it will contain the following object {id: ‘5’, foo: ‘bar’}
    • params - route params. If we have matching route with /page/user/:userId/post/:postId/ path and url of the page is /page/user/55/post/12/ then it will be the following object {userId: ‘55’, postId: ‘12’}
    • name - route name
    • hash - route URL hash
    • context - context that was passed to the route
    page.pageFromobjectPage data of the page that was currently active before this new page.
    page.contextobjectTemplate7 context that was passed for this page when using Template7 pages