1

moncaでOnsen UIを使って開発しています。タイトルの通りなのですが、
「Error: This page's bottom-toolbar is already registered.」
というエラーの解決方法を探しています。angular.jsを使って書けば解決できるような気がしてますが、学習コストを考えるとなんとか今のやり方でできたらと考えています。
心当たりのある方どうかよろしくお願いします。

index.html (エラー再現用)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();

        (function(){
            $(document).on('pageinit','#page2',function(){
                var obj = $('#carousel_area');
                var buf = 
                      '<ons-carousel style="height:700px;" swipeable fullscreen auto-scroll var="carousel">'
                        + '<ons-carousel-item>'
                            + '<div style="height:500px;width=300px;background-color:blue;">'
                            + '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
                        + '</div>'
                        + '</ons-carousel-item>'
                        + '<ons-carousel-item>'
                            + '<div style="height:500px;width=300px;background-color:green;">'
                            + '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
                        + '</div>'
                        + '</ons-carousel-item>'
                        + '<ons-bottom-toolbar id="follow_bottom" var="my-bottom-toolbar" style="height:100px;">'
                            + 'Page2'
                        + '</ons-bottom-toolbar>'
                    + '</ons-carousel>';

                obj.html(buf);
                ons.compile(obj[0]);
            });
        })();

    </script>
</head>
<body>
    <ons-navigator var="myNavigator" page="template_page1">
    </ons-navigator> 

    <ons-template id="template_page1">
        <ons-page id="page1">
        <h1>page1</h1>
            <ons-button onClick="myNavigator.pushPage('template_page2');">to Page2</ons-button>
            <p>
            to Page1 => to Page2 => to Page1 => to Page2(エラー) 
            </p>
        </ons-page>
    </ons-template>

    <ons-template id="template_page2">
        <ons-page id="page2">

        <div id="carousel_area">
        </div>

        </ons-page>
    </ons-template>    
</body>
</html>

1 件の回答 1

1

AngularJSを使わないでOnsenUIをjavascriptでガリガリ動かしたいと言うのは不可能じゃないでしょうか?
とりあえず、説明しますと、
OnsenUIは同一ページ内にテンプレートをページとして追加していきます。

<body>
    <ons-page>
        <tmplete1></tmplete1>
        <tmplete2></tmplete2><!-- ←Add! -->
    </ons-page>
</body>

実際にタグなどは違いますがこんな感じですね。
ですのでpushPageを行うとそのページテンプレートが追加されます。
今回の問題ですと既にtemplete_page1があるのにtemplete_page2を追加した後に
更にtemplete_page1templete_page2を追加しています。

<body>
    <ons-page>
        <tmplete1></tmplete1>
        <tmplete2></tmplete2>
        <tmplete1></tmplete1><!-- ←Duplicate Push! -->
        <tmplete2></tmplete2><!-- ←Further Push! -->
    </ons-page>
</body>

どういう事かと言うと、同じIDがついたテンプレートが同一ページに複数追加される訳です。
同じIDが複数ページにあると言う事はセレクタは動かないのでエレメントを追加出来ません。
追加されない状態でOnsenUIに初期化を促したせいでエラーが出たと言う事ですね。
OnsenUIではpopPageで直前のページに戻ります。
同じページを読むのであればコレで戻るか
スタックを削除し、追加しなおすかしかないでしょう。

//OnsenUIを宣言
ons.bootstrap();
//OnsenUIの準備が出来たら処理
ons.ready(function() {
    //ページがPUSHされた直後のイベント
    myNavigator.on('postpush', function(event) {
        //PUSHした後のページを取得
        var page = event.enterPage;
        //ページ名が'templete_page2'だった際に処理
        if("template_page2" == page.name){
            var obj = $('#carousel_area');
            //page1の呼び出しをpopPageに変更
            var buf = '<ons-carousel style="height:700px;" swipeable fullscreen auto-scroll var="carousel">' + 
                 '<ons-carousel-item>' + 
                 '<div style="height:500px;width=300px;background-color:blue;">' + 
                 '<ons-button onClick="myNavigator.popPage();">to Page1</ons-button>' + 
                 '</div>' + 
                 '</ons-carousel-item>' + 
                 '<ons-carousel-item>' + 
                 '<div style="height:500px;width=300px;background-color:green;">' + 
                 '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>' + 
                 '</div>' + 
                 '</ons-carousel-item>' + 
                 '<ons-bottom-toolbar id="follow_bottom" var="my-bottom-toolbar" style="height:100px;">' + 
                 'Page2' + 
                 '</ons-bottom-toolbar>' + 
                 '</ons-carousel>';
            
            obj.html(buf);
            ons.compile(obj[0]);
        }
    });
    /**********[追記]**********/
    //popPageされた直後のイベント
    myNavigator.on('postpop', function(event) {
        //poptpopした後のページを取得
        var page = event.enterPage;
        //ページ名が'templete_page1'だった際に処理
        if("template_page1" == page.name){
            //page1初期化
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>

<ons-navigator var="myNavigator" page="template_page1">
</ons-navigator> 

<ons-template id="template_page1">
  <ons-page id="page1">
    <h1>page1</h1>
    <ons-button onClick="myNavigator.pushPage('template_page2');">to Page2</ons-button>
    <p>
      to Page1 => to Page2 => to Page1 => to Page2(エラー) 
    </p>
  </ons-page>
</ons-template>

<ons-template id="template_page2">
  <ons-page id="page2">
    <div id="carousel_area">
    </div>
  </ons-page>
</ons-template>

参考リンク

4
  • Siegさま、返信ありがとうございます。 実際のアプリでは、page2のテンプレートは同一でもコンテンツデータをDBから取ってくるため、遷移ごとに表示する内容が違うのです。そのためpopPageでは対応できないので、destroy()でスタックを削除する方針で対応することにします(履歴が抜けてしまいますが・・・)。参考コードまで示していただき、ありがとうございました。
    – s.y
    2015年11月27日 6:23
  • 追記しました。popPageにもイベントはあるので、追記した内容で初期化は出来ませんか?page2から何かしら値を渡したい……などはsessionStorageもしくはlocalStorageで対応できるかと思います。
    – Sieg
    2015年11月27日 8:25
  • Siegさま。たびたびありがとうございます。 そうですね、popPage前に値を渡して戻れるなら想定通りの挙動となるのでもう少し模索してみようかと思います。結果はまた報告させて頂きます。ほんとにありがとうございます。
    – s.y
    2015年11月27日 9:58
  • 直後はpost〜ですが、直前はpre〜になります。参考リンクに詳しく書いてありますので頑張ってください。
    – Sieg
    2015年11月27日 10:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。