05.todoアプリ データモデルの作成
TODOの情報をデータモデルを使って定義します。
このページで説明するコードは、サンプルコードのtodoModel.jsに記述されています。
スキーマを定義
TODOのデータを管理するToDoModelのスキーマを次のように定義します。
プロパティ名 | 説明 | 型 | 備考 |
---|---|---|---|
id | このスキーマの主キーとなるプロパティ | Number | 必須項目 |
status | 完了または未完了かのステータスを保持する | Boolean | 完了の場合はtrueを未完了の場合はfalseを保持する |
checked | ステータス(画面表示用) | 文字列 | statusに依存する。statusがtrueの場合"checked"をそれ以外の場合はnullを保持する |
content | TODO内容 | String | |
contentStyle | TODO内容のCSSスタイル(画面表示用) | String | statusに依存する。statusがtrueの場合"line-through"をそれ以外の場合は空文字を保持する |
insertDate | 登録日 | number | ミリ秒で保持する |
ymdhms | 登録日年月日時分秒(画面表示用) | String | insertDateに依存する。『YY/MM/DD HH:MM:SS』でフォーマットされた日付の文字列を保持する |
データマネージャの作成
まずは、データモデルを管理するために必要な、データモデルマネージャToDoManagerを作成します。
var todoManager = h5.core.data.createManager('ToDoManager');
データモデルの作成
スキーマを定義を元に、ToDoManagerからデータモデルToDoModelを作成し、sample.todo.model.ToDoModelでグローバルに公開します。
var todoModel = todoManager.createModel({
name: 'TodoModel',
schema: {
// ID
id: {
id: true,
type: 'integer'
},
// ステータス
status: {
type: 'boolean'
},
checked: {
type: 'string',
depend: {
on: 'status',
calc: function() {
return this.get('status') ? 'checked' : null;
}
}
},
// 内容
content: {
type: 'string'
},
// 内容 - スタイル
contentStyle: {
type: 'string',
depend: {
on: 'status',
calc: function() {
return this.get('status') ? 'line-through' : '';
}
}
},
// 登録日
insertDate: {
type: 'number'
},
// 登録日 - 詳細表示用
ymdhms: {
type: 'string',
depend: {
on: 'insertDate',
calc: function() {
return toYMDHMS(this.get('insertDate'));
}
}
}
}
});
// sample.todo.model.ToDoModelでグローバルに公開する
h5.u.obj.expose('sample.todo.model', {
ToDoModel: todoModel
});
また、モデル内で使用するユーティリティ関数toYMDHMSも作成します。
var date = new Date(value);
var mm = date.getMonth() + 1;
var dd = date.getDate();
var hh = date.getHours();
var mi = date.getMinutes();
var ss = date.getSeconds();
if (mm < 10) {
mm = '0' + mm;
}
if (dd < 10) {
dd = '0' + dd;
}
if (hh < 10) {
hh = '0' + hh;
}
if (mi < 10) {
mi = '0' + mi;
}
if (ss < 10) {
ss = '0' + ss;
}
return date.getFullYear() + '/' + mm + '/' + dd + ' ' + hh + ':' + mi + ':' + ss;
}
データモデルの作成は以上です。
次の章では、データモデルを結果として表示させるために必要なビューを作成します。
次のステップ ⇒ サンプルアプリ ビューの作成