back
データストアによるデータベースの利用 (4/6)
■ビューのテンプレートを用意する
残るは、テンプレートファイルです。home.htmlを開き、以下のリストのように修正しましょう。これですべて完成となります。実際にプロジェクトを実行してブラウザからアクセスしてみましょう。フォームを送信すると、それがデータストアに保存され、トップページに一覧表示されるようになります。
このテンプレートでは、MainPage側でテンプレートに渡されたデータ（MyDataのfetchで取得したエンティティの配列です）から順にデータを取り出し表示する処理をしています。これは、繰り返しを行って処理しています。テンプレートを見ると、以下のように記述されていることがわかるでしょう。
このようにして、渡された配列のエンティティを次々と取り出し、その中身を出力しているわけです。これはデータストアによるデータの一覧を表示するのに必須となる処理ですので、ここでよく理解しておくと良いでしょう。
このテンプレートでは、MainPage側でテンプレートに渡されたデータ（MyDataのfetchで取得したエンティティの配列です）から順にデータを取り出し表示する処理をしています。これは、繰り返しを行って処理しています。テンプレートを見ると、以下のように記述されていることがわかるでしょう。
{% for 変数 in 配列 %}
……繰り返し表示する内容……
{% endfor %}これは、配列から要素を取り出して変数に渡し、間に書かれた部分を繰り返し出力する働きを持ちます。変数には配列から取り出されたエンティティが収められますので、この変数を使ってその中の値などを表示させることができます。例えば、{{data.message}}とすれば、エンティティのmessageプロパティを出力できるというわけです。このようにして、渡された配列のエンティティを次々と取り出し、その中身を出力しているわけです。これはデータストアによるデータの一覧を表示するのに必須となる処理ですので、ここでよく理解しておくと良いでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<h1>Home Page</h1>
<p>{{message}}</p>
<form method="post" action="/">
<table>
<tr>
<th>名前：</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>メッセージ：</th>
<td><textarea name="msg"></textarea></td>
</tr>
<tr><th></th>
<td><input type="submit" value="送信" /></td></tr>
</table>
</form>
<hr />
<table border="1" width="500px">
<tr>
<th width="350px">メッセージ</th>
<th width="150px">送信者</th>
</tr>
{% for data in datas %}
<tr>
<td>{{data.message}}<br />
({{data.time}})</td>
<td>{{data.name}}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
| << 前へ | 次へ >> |