前回はリスト画面でタップして詳細画面を出したら写真が出なかったのでどうしてだろうということで時間切れになった。今回はその原因究明とさらに詳細画面の充実を図る！
まず、写真が出ていない件。これはタップしたリストから画像ファイル名が詳細画面へ引き継がれていないため。もともとサンプルプログラムはリストからタップした項目の情報（タイトル、ラベル、説明）をそのまま詳細画面へ表示しているだけ。それを行っているのがテキストP.126～127のコード。だから、それらの情報と同じようにして画像ファイル名も引き継げばいい。それをやっているのが次のコード。
(function(){
'use strict';
var currentItem = {};
$('.item-title', this).text(currentItem.title);
$('.item-desc', this).text(currentItem.desc);
$('.item-label', this).text(currentItem.label);
$('.item-thum-photo', this).attr('src', currentItem.photo);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
var html = '';
$.each(listData, function(i, item) {
html += '';
html += '';
html += '';
html += '';
html += '
';
html += '
' + item.desc + '
';
html += '';
html += ' ';
html += '';
}
);
$("#item-list").html(html);
var content = $("#item-list").get(0);
ons.compile(content);
$('.item', this).on('click', function() {
currentItem = {
title : $('.item-title', this).text(),
desc : $('.item-desc', this).text(),
label : $('.item-label', this).text(),
photo : $('.item-thum-photo', this).attr('src')
};
app.navi.pushPage('detail.html');
});
});
})();
49行目でリスト画面で項目がタップされたとき画像ファイル名をcurrentItem.photoに保存し、9行目で詳細画面が表示されるときimgタグのsrcプロパティにcurrentItem.photoを設定しています。
次に、詳細画面の表示内容をタップされた項目ごとに変えます。そのために、まず、detail.htmlを次のように修正します。
<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">
<img src="" class="item-thum-photo" width="50px"></img>
</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 id="detail-item-list" style="margin-top: 10px">
</ons-list>
</ons-page>
</ons-template>
修正したのは33～34行目です。もともとはこのons-listタグ内にons-list-itemタグが3つあり、その中に前の画面でタップされた項目のタイトルと説明が表示されていました。今度は前にリスト画面でやったのと同じようにデータをHTMLから分離しjavascriptファイルとして独立させ、javascriptのプログラムでデータからons-list-itemタグを作ってやります。まず、detailData.jsというファイル名で次のようなデータを作成し、index.htmlからscriptタグで読み込ませます。
var detailData = {
"在本 璃奈": [
{
"title": "我が家の子供用品の選び方",
"desc": "冬は子供たちもココアや紅茶などを飲むので、キッズマグを探していましたがセリアでなかなかいい感じのマグを見つけました。"
},
{
"title": "好みや成長具合によって選ぶ",
"desc": "ずっと使うことを意識して、大人と同じマグやグラスという選択肢もありますが、モノに対する大人の思い入れを子供と共有できる自信もないので、子供のモノは、それなりに子供ウケしそうなもので…と割り切っています。"
},
{
"title": "一番のお気に入りポイント",
"desc": "お友達が遊びにきてくれたとき用のプラコップ（IKEA）はほんの時々しか出番はないので、他の場所に仕舞っています。"
}
],
"犬飼 佑汰": [
{
"title": "ソフトＢ 若鷹育てるファーム60億円基地",
"desc": "ソフトバンクが２・３軍の施設を福岡県福岡市から同県筑後市の「ＨＡＷＫＳベースボールパーク筑後」に移転して、約２カ月が過ぎた。"
},
{
"title": "完成間もないタマホームスタジアム筑後",
"desc": "その正面入り口の横には「めざせ 世界一！」と書かれた竣工（しゅんこう）の碑がある。孫正義オーナー（５８）が掲げるスローガンは、ファーム施設にまで行き届いていた。"
}
],
"臼井 彰生": [
{
"title": "車の購入価格とは",
"desc": "実はインターネット上で掲載されている中古車情報は全体の約30%に過ぎません。"
},
{
"title": "スマートカーライフプランナー",
"desc": "燃費がよく小回りがきく車がいいです。また、子供が２人いるので、スペースが広い車で。できるだけ高年式でキズやヘコミがなく、内装もシンプルで状態の良いものだとありがたいです。"
},
{
"title": "片道３０分程度の通勤",
"desc": "アメリカで人気のピックアップトラックを探しています。中古ではなかなか見つからないため苦労しています。左ハンドル・年式が新しい・色は黒を希望しています。"
}
],
"中村 綾斗": [
{
"title": "素晴らしい打楽器奏者リンゴ",
"desc": "今回のリマスターは素晴らしいですね。アナログの良さを充分引き出して高音質に仕上げたエンジニアの方々へ感謝です。後期のビートルズのアルバムは何百回聴いただろうか?数えきれない回数であることに違いない・・・。"
}
],
"清水 伸平": [
{
"title": "Forever Man",
"desc": "初回限定オブジェ付を買ったはずが普通のパッケージ。嫌な予感がして商品裏を見ると、薄い箱が。取り出すと、オブジェとは思えない貧相なおまけ。"
},
{
"title": "仁義を通すってことはこういうことなのだろう",
"desc": "「Old Sock」以来、僅か1年足らずで発売された昨年亡くなった敬愛するJ・J・ケイルに捧げる作品。まずゲスト陣が豪華、ウィリー・ネルソン、マーク・ノップラー、トムペティ、ジョン・メイヤーなどだ。"
},
{
"title": "JJへの感謝とECへの感謝",
"desc": "Pilgrim以降のECのアルバムはCFGは別物として惰性で聞き流す程度で真剣に聞き入ることもありませんでした。JJのことは昔からAfter MidnightやCocaineの作者であるくらいの認識でRoad to Escondidoもお気に入りではありませんでした。"
},
{
"title": "到着した翌日からヘビロテ盤！",
"desc": "クラプトン先生のこういう企画は最早や商業的成功なんて全く考えてないんでしょうね。JJ.ケイルに対する敬愛だけは充分に伝わってくる。JJ.ケイルの韜晦なところを聴き易く万人向けにアレンジした感じで、僕は気に入ったのでこの数日間ヘビロテで聴いております。でも音楽にとって「個性」って何なの？とかフト思っちゃいます。"
}
],
"田中 昌昭": [
{
"title": "天国への階段",
"desc": "6曲目のbornだけで天国へいける。何度繰り返し聴いてもあきない。信じる者は救われるで、この一曲のおかげでアメリカがまた好きになった。"
},
{
"title": "最高のバンドと最高のオーディエンス",
"desc": "バンドももちろんなのですが、年齢層の高いオーディエンスの皆さんが素晴らしかった！皆さんパットの曲を古いものまで熟知しており、Letter From Homeあたりの曲ではイントロ一小節で「オオッ」と歓声があがり、バンドのメンバーもびっくり。"
},
{
"title": "百花繚乱!ザッツ メセニーミュージック!",
"desc": "個人的に、日本の歌謡界にも影響を与えたと考えているパットお得意の転調と上昇のアンサンブルが展開します。ジュリオがホーンも演ってるようで、オーケストリオンも自然ですし、ビッグバンドなのかと錯覚してしまいます。ベンのエレベはジャコを思い出させます。"
},
{
"title": "心地よいジャズ・フュージョン最高！！",
"desc": "このアルバムは、Metheny Groupとしては２０年前に発表されたものですが、そのサウンドは今聞いても新鮮な感じがしていてブラジル・ティスト溢れる仕上がりになっています。"
}
]
};
このデータがdata.jsと違うところは名前をキーとした連想配列になっているところです。たとえばリスト画面で「在本 璃奈」さんがタップされたら「在本 璃奈」をキーとして詳細表示データにアクセスします。それはdetailData['在本 璃奈']です。そして、detailData['在本 璃奈']がオブジェクト配列になっているので、要素を一つずつ取り出してはtitleとdescをons-list-itemタグへ設定していきます。それを書いたのが次のコードです。
var html = '';
$.each(detailData[currentItem.title], function(i, item) {
html += '';
html += '';
html += '' + item.title + '';
html += '';
html += '
' + item.desc + '
';
html += '';
}
);
$("#detail-item-list").html(html);
var content = $("#detail-item-list").get(0);
ons.compile(content);
これは、app.jsで詳細画面(#detail-page)が表示されるとき(pageinitイベント発生時)に実行します。
