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>
    
```
CC BY-SA 3.0
2015-11-26T11:06:17.150
19331
2015-11-27T08:24:39.770
2015-11-26T11:29:54.617
9566
13419
question
monaca
2度目のons.comiple()でエラーになる
AngularJSを使わないでOnsenUIをjavascriptでガリガリ動かしたいと言うのは不可能じゃないでしょうか？  
とりあえず、説明しますと、  
OnsenUIは同一ページ内にテンプレートをページとして追加していきます。

```

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

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

[参考リンク](http://ja.onsen.io/guide/overview.html#Navigationevents)
CC BY-SA 3.0
2015-11-27T02:51:47.520
19360
2015-11-27T08:24:39.770
2015-11-27T08:24:39.770
7676
7676
19331
answer