Monaca Onsen UIで、Sliding MenuとMaster-Detailを併用したい
はじめまして。入門的な質問ですみません。
Onsen UIのSliding Menuをもとに、Master-Detailを組み合わせて作ってみたのですが、なぜかうまく動きません。
構成としては、
1.index.html
ons-sliding-menuを設置して、メニュー画面(menu.html)とメイン画面(main_1.html)を指定
<body>
<ons-sliding-menu var="app.slidingMenu"
menu-page="menu.html" main-page="main_1.html" side="left" type="overlay" max-slide-distance="150px">
</ons-sliding-menu>
</body>
2.menu.html
Onsen UI Sliding Menuのコードをほぼそのまま使って、メイン画面1~3を呼び出すメニューを3つ作る
3.main_1.html
ファイル数が増えると面倒になるので、ons-templateを使って、リスト画面(list.html)と詳細画面(detail.html)の2つをmain_1.html内に記入。
<ons-navigator var="app.navi" page="list.html">
</ons-navigator>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">タイトル</div>
</ons-toolbar>
<ons-list>
<リスト省略>
</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">タイトル</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top: 10px">
<詳細リストは省略>
</ons-list>
</ons-page>
</ons-template>
4.main_2.html
同じく、リスト画面(list.html)と詳細画面(detail.html)のそれぞれを、main_2.html内に記入。
5.main_3.html
同じく、リスト画面(list.html)と詳細画面(detail.html)のそれぞれを、main_3.html内に記入。
6.app.js
javascriptで、list.htmlとdetail.htmlを切り替え
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
$('.item-title', this).text(currentItem.title);
<略>
});
$(document).on('pageinit', '#list-page', function() {
$('.item', this).on('click', function() {
currentItem = {
title : $('.item-title', this).text(),
<略>
};
app.navi.pushPage('detail.html');
});
});
})();
という単純なものです。
形としては出来上がって、javascriptがきちんとmaster.htmlの値をdetail.htmlに渡すところまではうまくいくのですが、メイン画面の一番下(リスト画面と詳細画面のいずれでも)に、スライディングメニューのような感じで、なぜかdetail.htmlで値を入れる前のダミーの文字(省略したリスト部分)が表示されてしまいます(言葉で説明するのは難しいのですが)。
ons-templateやons-pageがきちんと閉じられていないかのような表示にも見えるのですが、上のとおり、タグはきちんと閉じています。
そもそも、Sliding MenuにMaster-Detailを組み合わせるやり方はこれでいいのか。そして、メイン画面が3つある場合、それぞれに同じ名前のlist.htmlがあってもいいのか(名前を変えるとなると、今後メイン画面が増えたときに、javascript内のpushPageの引数をたくさん用意しなくてはならないので面倒だなと思っています)。
長い質問となってしまいすみません。どなたかアドバイスいただけるととても助かります。
どうぞよろしくお願いいたします。