0

初心者ですみません。

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

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

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

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

(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');
    });
  });

})();
<!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>

4
  • 1
    現象が再現できるコードを載せましょう。
    – otak-lab
    Commented 2016年1月8日 3:55
  • コメントありがとうございます! Commented 2016年1月8日 7:20
  • エラーPage is not found: home.htmlは発生しますが、プレビューとMonacaデバッガー(Android)では表示されますね。<body>の直下だと一瞬表示して消えますね。
    – otak-lab
    Commented 2016年1月8日 8:49
  • app.js の app.navi.pushPage('detail.html'); 上記が動作していないようなのですが、どのように記述すればよいのでしょうか・・・ あと、 home.htmlはダミーなので、home.htmlの記述がありませんでした。 申し訳ございません。 list.htmlからdetail.htmlの動作のみでお願いできればと思います。 Commented 2016年1月9日 3:10

1 件の回答 1

0

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

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 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>

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

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 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>

app.js

(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);
        };
    });
})();
1
  • 動きました!ありがとうございます! AngularJSを利用するのですね、勉強になります。 html5でアプリ制作をしたいと、今年に入り、書籍を読みながら、 monocaを使い始めたのですが、javascriptの知識に乏しく すでに悪戦苦闘ですが、あきらめず、学んでいこうと思います! Commented 2016年1月9日 10:48

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

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