how to increase stack of popPage() in OnsenUI?

Question

currently I am developing application in phonegap through OpenUI framework. I want to increase the stack of the popPage() function. Currently i can go back previous page, but not more than that. Can i give ons.navigator.pushPage() transition same as popPage()? Please someone help me to solve these issue as soon as possible.

you can only pop as many times as you pushed. may be you want to pushPage but with different animation? — Tamura, Mar 28 '14 at 05:10
what i mean is there are 3 pages index.html, first.html and second.html. if we start from index, push to first.html and then push to second.html, now what happens is that when i popPage from second it only goes to first, it doesn't go back from first to index. Please help me to solve these issue m facing.. — Navneeth, Mar 28 '14 at 05:40

score 1 · Answer 1 · answered Mar 28 '14 at 06:46

I guess you want to jump to the first page skipping the first.html.

You can use ons.navigator.resetToPage(url)

Let's say you have index.html, page1.html, page2.html, and page3.html. When we are in page3.html, we want to jump to page1.html, skipping page2.html.

index.html

index.html has page1.html as the root page.

<body>
  <ons-navigator page="page1.html"></ons-navigator>
</body>

page1.html

page1 will push to page 2

<ons-page>
  <ons-button ng-click="ons.navigator.pushPage('page2.html')">
     Push Page 2
  </ons-button>
</ons-page>

page2.html

page 2 will push to page 3

<ons-page>
  <ons-button ng-click="ons.navigator.pushPage('page3.html')">
     Push Page 3
  </ons-button>
</ons-page>

page3.html

page 3 will reset to page 1 (skipping page 2)

<ons-page>
  <ons-button ng-click="ons.navigator.resetToPage('page1.html')">
     Reset to page 1
  </ons-button>
</ons-page>

suppose from page3.html i perform popPage() which goes to page2.html, but when from page2.html i perform popPage() it doesn't go to page1.html. I tried resetToPage, but it doesn't give any transition effect. it seems that popPage only goes to 1 previous page. — Navneeth, Mar 28 '14 at 06:57

score 1 · Answer 2 · answered Sep 15 '14 at 10:43

i am facing the same way as your problems. I'm end up with overriding default popPage function.

Here what i'm trying to do.

ons.ready(function(){
    /* Custom poppage */
    ons.navigator._popPage = function(options){
        var unlock = this._doorLock.lock();

        var leavePage = this.pages.pop();

        var step = options.step ? options.step : 1; // added step option

        if (this.pages[this.pages.length - step]) {
          this.pages[this.pages.length - step].element.css('display', 'block');
        }

        var enterPage = this.pages[this.pages.length -step];

        var event = {
          leavePage: leavePage,
          enterPage: this.pages[this.pages.length - step],
          navigator: this
        };

        var callback = function() {
            for(var s=1; s < step; s++){
                this.pages[this.pages.length - s].destroy();   // also destroy skipped page                    
            }
            leavePage.destroy();
            unlock();
            this.emit('postpop', event);
            event.leavePage = null;

            if (typeof options.onTransitionEnd === 'function') {
            options.onTransitionEnd();
            }
        }.bind(this);

        leavePage.options.animator.pop(enterPage, leavePage, callback);
    }
});

i add step variable in the options params to let me decide how many page that i want to going back.

Here how i use my custom function :

ons.navigator.popPage({step:2});

not very clever solution maybe, but i hope it can point you for a better solution.

score 0 · Answer 3 · answered Dec 30 '14 at 18:53

0

I use ons.navigator.resetToPage(url) too, and you can set animation with the second param for options, example:

ons.navigator.resetToPage(url, { animation: 'fade' })

answered Dec 30 '14 at 18:53

jsanroman

41
1
5

score 0 · Answer 4 · answered Oct 13 '15 at 18:58

0

Take a look at: https://github.com/OnsenUI/OnsenUI/issues/226

You can destroy the pages in the middle, then pop the state.

answered Oct 13 '15 at 18:58

Aᴍɪʀ

7,623
3
38
52

score 0 · Answer 5 · answered Jul 13 '17 at 04:53

I'm not sure about onsen ui ver.2, but using onsen ui ver.1, you can define a var attribute in ons-navigator tag like this:

<ons-navigator title="Navigator" var="testing_Nav">
  . 
  .
  .
  .
</ons-navigator>

and in your js file, you can navigate to your desired page using that variable like this:

testing_Nav.resetToPage('page_name.html', {animation: 'fade'});

For More Information:
Onsen UI Documentation

how to increase stack of popPage() in OnsenUI?

5 Answers5