【Cordova】Onsen UIのons-back-buttonで確認メッセージを表示する

今回は、Onsen UIのons-back-buttonで確認メッセージを表示する方法を説明します。
※Onsen UI Ver.2.12.0以上とします。Monacaテンプレートを使用の場合、事前にバージョンを確認してください。

【Monaca】Onsen UI + JavaScriptで買い物リストを作るで使用したコードを流用します。

2019.10.31

今回は、Onsen UI + JavaScriptのみで買い物リストを作ります。機能としては、買い物リストの新規登録・編集・削除、ons-list-itemの追加・編集・削除を重点においていますので、再起動すると買い物リストは消えてしまいます。買い物リストの保存については、次回に紹介する予定です。Monacaデバッガーの結果です。買い物リスト画面の右下の(＋)ボタンをタップすると、商品名入力画面が表示されます。商品名を入力後、右上の保存ボタンをタップすると、買い物リストに入力した商品名が追加されます。買い物リストの商品名をタップする…

まず、確認メッセージを表示する画面を認識するため、ons-pageにidを設定します。
流用コードにはpage-inputが設定されています。

case文のあとに2行目以下のコードを追加します。

ポイントだけ説明します。
Androidの＜ボタンを押した場合、確認メッセージが表示され、OKボタンを選択した場合、前の画面に戻る動作を継続するため、callParentHandler()を呼び出します。（4行目）
ツールバーの←ボタンを押した場合、前の画面に戻る動作を止めるため、preventDefault()を呼び出します。（8行目）
確認メッセージが表示され、OKボタンを選択した場合、手動で前の画面に戻ります。（10行目）

case "page-input":  // 商品名入力画面
  var clickDeviceBackButton = function (e) {
    ons.notification.confirm({message: "clickDeviceBackButton", callback: function (res) {
      if (res == 1) e.callParentHandler();
    }});
  };
  var clickBackButton = function (e) {
    e.preventDefault();
    ons.notification.confirm({message: "clickBackButton", callback: function (res) {
      if (res == 1) myNavigator.popPage();
    }});
  };
  var el = document.getElementById(event.target.id);
  el.onDeviceBackButton = clickDeviceBackButton;
  el.querySelector("ons-back-button").onClick = clickBackButton;

Androidの＜ボタンを押した場合。