OnsenUI (Phonegap) - Sliding Menu & Navigator Back Button

Question

I'm trying to implement a back button on the "browsehotels.html" page into the code example shown in this code pen.

<ons-sliding-menu
  menu-page="menu.html" main-page="home.html" side="left"
  var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page modifier="menu-page">
    <ons-toolbar modifier="transparent"></ons-toolbar>

    <ons-list class="menu-list">
      <ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
        <ons-icon icon="fa-plus"></ons-icon>
        Home
      </ons-list-item>

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Browse Hotels
      </ons-list-item>

    <ons-list-item class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Special Offers <div class="notification menu-notification">3</div>
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Blog
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Bookings
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Contact Us
      </ons-list-item>        

    </ons-list>

  </ons-page>
</ons-template>

<ons-template id="home.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Some App with sliding menu</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item ng-click="myNav.pushPage('newpage.html')">
             Some list item
        </ons-list-item>
         <ons-list-item ng-click="myNav.pushPage('newpage2.html')">
             Some list item2
        </ons-list-item>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="newpage.html">
  <ons-page>
     <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title</div>
      </ons-toolbar>
  </ons-page>
</ons-template>
<ons-template id="newpage2.html">
  <ons-page>
     <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title2</div>
      </ons-toolbar>
  </ons-page>
</ons-template>


<ons-template id="browsehotels.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Browse hotels</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>
       <ons-list>
        <ons-list-item ng-click="myNav.pushPage('newpage.html')">
             hotels - Some list item
        </ons-list-item>
         <ons-list-item ng-click="myNav.pushPage('newpage2.html')">
             hotels - Some list item2
        </ons-list-item>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

When I put an ons back button into the browsehotels.html page it doesn't appear as there is no page to go back to. Is there a way I can manually set a page to go "back" to? Or should I recode the structure to function in a different way?

In the code pen example, when a user goes to the browsehotels.html page and wants to return back some may naturally click their Android back button, which in this case would close the app. Instead it (along with an actual coded back button) return the user to the home.html page.

Answer 1

You can use only ons-back-button styles to make something similar with the behavior you want:

<style>
  .ons-back-button__icon {
    vertical-align: top;
    font-size: 36px;
    margin-left: 8px;
    margin-right: 2px;
    width: 16px;
    display: inline-block;
    padding-top: 1px;
  }
</style>

<ons-toolbar-button class="toolbar-button--quiet" onclick="menu.setMainPage(.....)">
  <i class="ion-ios-arrow-back ons-back-button__icon"></i>
  Back
</ons-toolbar-button>

You don't even need a navigator in this case.

Another option is to combine Sliding Menu with a Navigator inside and always use navi.resetToPage(...) and navi.pushPage(...) instead of menu.setMainPage(...). Something similar to this.

Answer 2

The easiest solution is to just add "home.html" back into the stack of pages using the following code:

document.addEventListener("pageinit",function(e){
    if(e.target.id == "browsehotels"){
        nav.insertPage(-1, 'home.html', {param: 'value'});
    }
}, false);

By setting a page id of "browsehotels" to the ons-page element that was child to the browsehotels.html template the above code will detect when this page is loaded and then add home.html into the navigation so that adding an ons back button or using the devices own back button will take you to the home.html page.