Slide-Menu and Templates: How to keep the content in a page

[mentizm]

Hi,

need some help for this problem. I have 2 pages. One of them “PAGE1” is edited by a user. So the content change in <div id=“damage-list”></div> to <div id=“damage-list”>SOME USER CONTENT</div>

Now the user open the slide menu and chose “PAGE2”. After this he will return to “PAGE1” and go on with work on his old content but SOME USER CONTENT. But this isnt possible because SOME USER CONTENT is deleted and the page is in his initial state.

Is there a solution by ONSEN or have i do some magic with javascript.

<ons-sliding-menu 
  main-page="page1.html" 
  menu-page="myMenu.html" 
  side="left" 
  max-slide-distance="250px"
  var="myMenu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="myMenu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <div id="damage-list"></div>

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


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="myMenu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template> 


<ons-template id="myMenu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="myMenu.setMainPage('page1.html', {closeMenu: true},function(){console.log('xxx')})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="myMenu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

[Saputro]

Hi, @mentizm. iam not sure is there other solution, but i use rootscape to save any data, then on initial i reload on same view if is exist.

[Fran Diox]

I think something like this feature gh#895 is what you are looking for, right?
It was closed after implementing navigator.bringPageTop method (only for Onsen UI 2.0). You can combine ons-sliding-menu (parent) and ons-navigator (child) and replace menu.setMainPage with navi.bringPageTop (you can add {animation: 'none'} if you want). This way you keep the pages in the stack with their current data. If you don’t want to keep a specific page then use navi.replacePage.

In Onsen UI 2.0 you can also use page life cycle events to save data and restore it easily.

If you are using Onsen UI 1.x then you should do as @Saputro says.

frandiox created this issue in OnsenUI/OnsenUI

closed Feature request: persistent/unique pages in slidingMenu/ splitView/ splitter #895

[mentizm]

@Fran-Diox Hi Fran thanks for your solution. I will try to combine ONS-SLIDING and ONS-NAVI but im verry new with ONSENUI so it would be great if can show me a sample how to combine them.

I will try some code for myself and will post my solution if it works.

[Fran Diox]

@mentizm
It’s quite simple: http://codepen.io/frankdiox/pen/RrQzJv
Enjoy! :smile:

[Flosef]

@Fran-Diox
I want to add a side question, hope it’s ok:

Playing with the slide menu, I want to define the menu-page in an external file.
It don’t get it running.

I think is it unnecessary to say that I’am new ;-)

//Main File with the silder

 <ons-sliding-menu
    main-page="html/view-start.html" 
    menu-page="html/view-slide-menu.html" 
    side="left" 
    max-slide-distance="250px"
    var="slideMenu">
  </ons-sliding-menu>

//External File with the slide menu in folder html

<ons-template id="view-slide-menu.html">
    <ons-list>
      <ons-list-item modifier="chevron" onclick="myNavi.bringPageTop('view-start.html', {closeMenu: true})">
        page1.html
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="myNavi.bringPageTop('page2.html', {closeMenu: true})">
        page2.html
      </ons-list-item>
    </ons-list>
</ons-template>

[Fran Diox]

@Flosef You don’t need to use ons-template in external files. It is only used when including pages inside index.html. Just remove ons-template tag and name your file “view-slide-menu.html” inside “html” folder.

[Flosef]

@Fran-Diox

Thank you! Seems to work fine