06.todoアプリ ビューの定義
Last modified by masaru-yokoyama on 2014/05/16, 14:38
データバインドチュートリアル目次
前のページでデータの形を決めたので、次はビュー(画面)を作成します。
このページで説明するコードは、サンプルコードのindex.htmlに記述されています。
ビューの構成
大きく分けて以下の3つの機能を作成します。
- TODOを登録するフォーム (登録フォーム)
- TODOの一覧を表示するリスト (一覧画面)
- 一覧で選択されたデータの詳細を表示し、変更または削除できるフォーム (詳細画面)
完成は以下のような画面を想定しています。
データモデルをビューに反映するには、コントローラでDOMを操作して表示させる方法ではなく、
ビューバインディングの機能の一つであるコメントビューと、ObservableArrayを使用して自動的にビューに反映されるよう作成します。
サンプルコード
以下のとおり、画面HTMLを作成します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="../archives/current/h5.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="../res/lib/jquery/jquery.js"></script>
<script src="../archives/current/h5.dev.js"></script>
<script src="js/todoModel.js"></script>
<script src="js/todoLogic.js"></script>
<script src="js/todoController.js"></script>
<script src="js/init.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="content" class="content">
<div class="header">
<form id="todoRegForm">
<div class="todo-form corner-all box">
<div class="todo-form-right">
<input type="button" id="btnRegist" class="corner-all ui-button gray" value="登録" tabindex="2">
</div>
<div class="todo-form-left">
<input type="text" id="txtTodo" class="corner-all ui-text txt-todo" placeholder="TODO" tabindex="1">
</div>
</div>
</form>
</div>
<div class="top">
<!--{h5view id="tmplTodos"}
<table class="todo-list" id="list">
<thead>
<tr><th> </th><th>内容</th></tr>
</thead>
<tbody data-h5-loop-context="todos">
<tr>
<td class="status">
<input type="hidden" data-h5-bind="id" />
<input type="checkbox" class="ui-check" data-h5-bind="attr(checked):checked"/>
</td>
<td class="content">
<span data-h5-bind="content;style(text-decoration):contentStyle"></span>
</td>
</tr>
</tbody>
</table>
-->
</div>
<div class="bottom">
<!--{h5view id="tmplDetail"}
<form id="detailForm" class="form-detail" data-h5-loop-context="detail">
<table class="tbl-detail">
<tr>
<th>登録日:</th>
<td>
<span data-h5-bind="ymdhms"></span>
<input type="hidden" name="id" data-h5-bind="id"/>
</td>
</tr>
<tr>
<th>TODO:</th>
<td><input type="text" name="content" class="ui-text" data-h5-bind="content" /></td>
</tr>
<tr>
<th>完了:</th>
<td><input type="checkbox" name="status" class="ui-check" data-h5-bind="attr(checked):checked"/></td>
</tr>
<tr>
<td colspan="2">
<div class="div-btn-space"><input type="button" id="btnUpdate" class="corner-all ui-button gray" value="更新" /></div>
<div class="div-btn-space"><input type="button" id="btnDel" class="corner-all ui-button gray" value="削除" /></div>
</td>
</tr>
</table>
</form>
-->
</div>
</div>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="../archives/current/h5.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="../res/lib/jquery/jquery.js"></script>
<script src="../archives/current/h5.dev.js"></script>
<script src="js/todoModel.js"></script>
<script src="js/todoLogic.js"></script>
<script src="js/todoController.js"></script>
<script src="js/init.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="content" class="content">
<div class="header">
<form id="todoRegForm">
<div class="todo-form corner-all box">
<div class="todo-form-right">
<input type="button" id="btnRegist" class="corner-all ui-button gray" value="登録" tabindex="2">
</div>
<div class="todo-form-left">
<input type="text" id="txtTodo" class="corner-all ui-text txt-todo" placeholder="TODO" tabindex="1">
</div>
</div>
</form>
</div>
<div class="top">
<!--{h5view id="tmplTodos"}
<table class="todo-list" id="list">
<thead>
<tr><th> </th><th>内容</th></tr>
</thead>
<tbody data-h5-loop-context="todos">
<tr>
<td class="status">
<input type="hidden" data-h5-bind="id" />
<input type="checkbox" class="ui-check" data-h5-bind="attr(checked):checked"/>
</td>
<td class="content">
<span data-h5-bind="content;style(text-decoration):contentStyle"></span>
</td>
</tr>
</tbody>
</table>
-->
</div>
<div class="bottom">
<!--{h5view id="tmplDetail"}
<form id="detailForm" class="form-detail" data-h5-loop-context="detail">
<table class="tbl-detail">
<tr>
<th>登録日:</th>
<td>
<span data-h5-bind="ymdhms"></span>
<input type="hidden" name="id" data-h5-bind="id"/>
</td>
</tr>
<tr>
<th>TODO:</th>
<td><input type="text" name="content" class="ui-text" data-h5-bind="content" /></td>
</tr>
<tr>
<th>完了:</th>
<td><input type="checkbox" name="status" class="ui-check" data-h5-bind="attr(checked):checked"/></td>
</tr>
<tr>
<td colspan="2">
<div class="div-btn-space"><input type="button" id="btnUpdate" class="corner-all ui-button gray" value="更新" /></div>
<div class="div-btn-space"><input type="button" id="btnDel" class="corner-all ui-button gray" value="削除" /></div>
</td>
</tr>
</table>
</form>
-->
</div>
</div>
</body>
</html>
コメントの中に<!--{h5view id=xxxxx} -->のように書かれている箇所が2か所あります。これがコメントビュー機能で使用するコメントテンプレートです。
これらのコメントの先頭に書かれているid=tmplTodosとid=tmplDetailは、データモデルをテンプレートにバインドする際、どのテンプレートを使用するか指定するときに必要な識別子です。
次の章では、前の章で作成したToDoModelの操作を担当するロジックを作成します。
次のステップ ⇒ サンプルアプリ ロジックの作成