Help us understand the problem. What is going on with this article?

【Onsen UI】popPage()をした後の画面を操作する方法

概要

popPage()をした後に、遷移後の画面を取得できず混乱したため、解決策をメモ
pushPage()に関する記事はたくさんあるのに...

問題点

popPage()をした後に戻った先の画面が取得できない

解決策

popPage()の後に発生するイベント、"postPop" を利用
リファレンスの最後に載っていた https://ja.onsen.io/v2/api/js/ons-navigator.html

具体的には、JavaScriptに以下の EventListener を追記

document.addEventListener('postpop', function(event){
  var newPage = event.enterPage;
  alert(newPage.id);
})

サンプルコード

Navigator のリファレンスにコピペしてもテストできます

html
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>
js
document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

//  追記は以下だけ
document.addEventListener('postpop', function(event){
  var newPage = event.enterPage;
  alert(newPage.id);
})
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away