20776


初心者ですみません。

monacaのOnsen UI Master-Detailのテンプレート（index.html)で、  
同じくテンプレートのOnsen UI tabbarのソースをコピーし、  
（ons-tabbar var="tabbar"～）貼り付けたら、  
list.htmlからdetailページに動作しなくなってしまいました。

どのようにすれば、動作するようになるのでしょうか。

単純に、下にタブが表示されたリストページから、各アイテムをタッチすると、  
詳細ページに動作させたいのです。

何卒、宜しくお願いいたします。

[code]

    (function(){
      'use strict';
    
      var currentItem = {};
    
      $(document).on('pageinit', '#detail-page', function() {
        $('.item-title', this).text(currentItem.title);
        $('.item-desc', this).text(currentItem.desc);
        $('.item-label', this).text(currentItem.label);
        $('.add-note-action-item', this).click(function () {
            alert('dummy message');
        });
      });
    
      $(document).on('pageinit', '#list-page', function() {
        $('.item', this).on('click', function() {
          currentItem = {
            title : $('.item-title', this).text(),
            desc : $('.item-desc', this).text(),
            label : $('.item-label', this).text()
          };
    
          app.navi.pushPage('detail.html');
        });
      });
    
    })();
[/code]

[code]

    <!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 src="js/app.js"></script>
      <script>
        ons.bootstrap();
    
      </script>
      <style>
        .item {
          padding: 10px;
          line-height: 1;
        }
        .item-thum {
          background-color: #ccc;
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }
        .item-title {
          font-size: 15px;
          font-weight: 500;
        }
        .item-desc {
          font-size: 14px;
          color: #666;
          line-height: 1.3;
          margin: 4px 0 0 0;
          padding: 0 30px 0 0;
        }
        .item-label {
          font-size: 12px;
          color: #999;
          float: right;
        }
      </style>
    </head>
    
    
    <body>    
    
    
      <ons-navigator page="list.html" var="app.navi"></ons-navigator>
    
      <ons-template id="list.html">
        <ons-page id="list-page">
          <ons-toolbar>
            <div class="center">Master Details</div>
          </ons-toolbar>
    
          <ons-list>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Item Title</span>
                    <span class="item-label">4h</span>
                  </header>
                  <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Another Item Title</span>
                    <span class="item-label">6h</span>
                  </header>
                  <p class="item-desc">Ut enim ad minim veniam.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
    
            <ons-list-item modifier="chevron" class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Yet Another Item Title</span>
                    <span class="item-label">1day ago</span>
                  </header>
                  <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </ons-col>
              </ons-row>                          
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-template>
    
      <ons-template id="detail.html">
        <ons-page id="detail-page">
    
          <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Details</div>
          </ons-toolbar>
    
          <ons-list modifier="inset" style="margin-top: 10px">
            <ons-list-item class="item">
              <ons-row>
                <ons-col width="60px"> 
                  <div class="item-thum"></div>
                </ons-col>
                <ons-col>
                  <header>
                    <span class="item-title">Title</span>
                    <span class="item-label">Foobar</span>
                  </header>
                  <p class="item-desc">desc</p>
                </ons-col>
              </ons-row>
            </ons-list-item>
    
            <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
              <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
              Add a note
            </ons-list-item>
          </ons-list>
    
          <ons-list style="margin-top: 10px">
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
            <ons-list-item class="item">
              <header>
                <span class="item-title">Lorem ipsum dolor sit amet</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
          </ons-list>
    
          <br>
    
        </ons-page>
      </ons-template>
    
    
     <ons-tabbar var="tabbar">
            <ons-tabbar-item
                icon="home"
                label="Home"
                page="home.html"
                active="true"></ons-tabbar-item>
            <ons-tabbar-item
                icon="comment"
                label="Comments"
                page="photo.html"></ons-tabbar-item>
            <ons-tabbar-item
                icon="gear"
                label="Settings"
                page="list.html"></ons-tabbar-item>
        </ons-tabbar>
        
        
        
    </body>
    
    </html>
[/code]


CC BY-SA 3.0
2016-01-08T02:45:49.243
20731
2016-01-09T07:26:50.933
2016-01-08T07:19:50.677
13934
13934
question
monaca onsen-ui
onsen ui のtabbarとMaster-Detailを併用したい


`ons-navigator`を`ons-template`内に組み込み、`ons-
tabbar`のアクティブになるページに`list.html`を指定することで動作します。

index.html

[code]

    <!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 src="js/app.js"></script>
            <script>
                ons.bootstrap();
            </script>
            <style>
                .item {
                  padding: 10px;
                  line-height: 1;
                }
                .item-thum {
                  background-color: #ccc;
                  width: 50px;
                  height: 50px;
                  border-radius: 4px;
                }
                .item-title {
                  font-size: 15px;
                  font-weight: 500;
                }
                .item-desc {
                  font-size: 14px;
                  color: #666;
                  line-height: 1.3;
                  margin: 4px 0 0 0;
                  padding: 0 30px 0 0;
                }
                .item-label {
                  font-size: 12px;
                  color: #999;
                  float: right;
                }
            </style>
        </head>
        <body>
            <ons-template id="list.html">
                <ons-navigator var="app.navi">
                    <ons-page id="list-page">
                        <ons-toolbar>
                            <div class="center">Master Details</div>
                        </ons-toolbar>
                        <ons-list>
                            <ons-list-item modifier="chevron" class="item">
                                <ons-row>
                                    <ons-col width="60px">
                                        <div class="item-thum"></div>
                                    </ons-col>
                                    <ons-col>
                                        <header>
                                            <span class="item-title">Item Title</span>
                                            <span class="item-label">4h</span>
                                        </header>
                                        <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </ons-col>
                                </ons-row>
                            </ons-list-item>
                            <ons-list-item modifier="chevron" class="item">
                                <ons-row>
                                    <ons-col width="60px">
                                        <div class="item-thum"></div>
                                    </ons-col>
                                    <ons-col>
                                        <header>
                                            <span class="item-title">Another Item Title</span>
                                            <span class="item-label">6h</span>
                                        </header>
                                        <p class="item-desc">Ut enim ad minim veniam.</p>
                                    </ons-col>
                                </ons-row>
                            </ons-list-item>
                            <ons-list-item modifier="chevron" class="item">
                                <ons-row>
                                    <ons-col width="60px">
                                        <div class="item-thum"></div>
                                    </ons-col>
                                    <ons-col>
                                        <header>
                                            <span class="item-title">Yet Another Item Title</span>
                                            <span class="item-label">1day ago</span>
                                        </header>
                                        <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                    </ons-col>
                                </ons-row>
                            </ons-list-item>
                        </ons-list>
                    </ons-page>
                </ons-navigator>
            </ons-template>
    
            <ons-template id="detail.html">
                <ons-page id="detail-page">
                    <ons-toolbar>
                        <div class="left">
                            <ons-back-button>Back</ons-back-button>
                        </div>
                        <div class="center">Details</div>
                    </ons-toolbar>
                    <ons-list modifier="inset" style="margin-top: 10px">
                        <ons-list-item class="item">
                            <ons-row>
                                <ons-col width="60px">
                                    <div class="item-thum"></div>
                                </ons-col>
                                <ons-col>
                                    <header>
                                        <span class="item-title">Title</span>
                                        <span class="item-label">Foobar</span>
                                    </header>
                                    <p class="item-desc">desc</p>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
                            <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>Add a note
                        </ons-list-item>
                    </ons-list>
                    <ons-list style="margin-top: 10px">
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                    </ons-list>
                    <br>
                </ons-page>
            </ons-template>
    
            <ons-tabbar var="tabbar">
                <ons-tabbar-item icon="home" label="Home" page="list.html" active="true"></ons-tabbar-item>
                <ons-tabbar-item icon="comment" label="Comments" page="photo.html"></ons-tabbar-item>
                <ons-tabbar-item icon="gear" label="Settings" page="list.html"></ons-tabbar-item>
            </ons-tabbar>
        </body>
    </html>
    
[/code]

ただ、このサンプルのコードは動いたとしても実用的ではないと思います。  
`AngularJS`を利用すると次のようなコードになります。

index.html

[code]

    <!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 src="js/app.js"></script>
            <style>
                .item {
                  padding: 10px;
                  line-height: 1;
                }
                .item-thum {
                  background-color: #ccc;
                  width: 50px;
                  height: 50px;
                  border-radius: 4px;
                }
                .item-title {
                  font-size: 15px;
                  font-weight: 500;
                }
                .item-desc {
                  font-size: 14px;
                  color: #666;
                  line-height: 1.3;
                  margin: 4px 0 0 0;
                  padding: 0 30px 0 0;
                }
                .item-label {
                  font-size: 12px;
                  color: #999;
                  float: right;
                }
            </style>
        </head>
        <body>
            <ons-tabbar var="tabbar">
                <ons-tabbar-item icon="home" label="Home" page="list.html" active="true"></ons-tabbar-item>
                <ons-tabbar-item icon="comment" label="Comments" page="photo.html"></ons-tabbar-item>
                <ons-tabbar-item icon="gear" label="Settings" page="list.html"></ons-tabbar-item>
            </ons-tabbar>
    
            <ons-template id="list.html">
                <ons-navigator var="myNavigator">
                    <ons-page id="list-page" ng-controller="listController">
                        <ons-toolbar>
                            <div class="center">Master Details</div>
                        </ons-toolbar>
                        <ons-list>
                            <ons-list-item modifier="chevron" class="item" ng-repeat="item in itemTable" ng-click="showDetail(item)">
                                <ons-row>
                                    <ons-col width="60px">
                                        <div class="item-thum"></div>
                                    </ons-col>
                                    <ons-col>
                                        <header>
                                            <span class="item-title">{{item.title}}</span>
                                            <span class="item-label">{{item.label}}</span>
                                        </header>
                                        <p class="item-desc">{{item.desc}}</p>
                                    </ons-col>
                                </ons-row>
                            </ons-list-item>
                        </ons-list>
                    </ons-page>
                </ons-navigator>
            </ons-template>
    
            <ons-template id="detail.html">
                <ons-page id="detail-page" ng-controller="detailController">
                    <ons-toolbar>
                        <div class="left">
                            <ons-back-button>Back</ons-back-button>
                        </div>
                        <div class="center">Details</div>
                    </ons-toolbar>
                    <ons-list modifier="inset" style="margin-top: 10px">
                        <ons-list-item class="item">
                            <ons-row>
                                <ons-col width="60px">
                                    <div class="item-thum"></div>
                                </ons-col>
                                <ons-col>
                                    <header>
                                        <span class="item-title">{{item.title}}</span>
                                        <span class="item-label">{{item.label}}</span>
                                    </header>
                                    <p class="item-desc">{{item.desc}}</p>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item" ng-click="addNote(item.title)">
                            <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>Add a note
                        </ons-list-item>
                    </ons-list>
                    <ons-list style="margin-top: 10px">
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                        <ons-list-item class="item">
                            <header>
                                <span class="item-title">Lorem ipsum dolor sit amet</span>
                            </header>
                            <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </ons-list-item>
                    </ons-list>
                    <br>
                </ons-page>
            </ons-template>
        </body>
    </html>
    
[/code]

app.js

[code]

    (function(){
        "use strict";
    
        var app = ons.bootstrap("myApp", ["onsen"]);
        app.controller("listController", function($scope) {
            $scope.itemTable = [{
                title: "Item Title",
                label: "4h",
                desc:  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            }, {
                title: "Another Item Title",
                label: "6h",
                desc:  "Ut enim ad minim veniam."
            }, {
                title: "Yet Another Item Title",
                label: "1day ago",
                desc:  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
            }, {
                title: "あああ",
                label: "いいい",
                desc:  "うううえええおおお"
            }];
    
            $scope.showDetail = function(item) {
                myNavigator.pushPage("detail.html", {item: item});
            };
        });
    
        app.controller("detailController", function($scope) {
            ons.ready(function() {
                $scope.item = myNavigator.getCurrentPage().options.item;
            });
    
            $scope.addNote = function(title) {
                alert("dummy message " + title);
            };
        });
    })();
    
[/code]


CC BY-SA 3.0
2016-01-09T07:26:50.933
20776
2016-01-09T07:26:50.933
9566
20731
answer