Blog
チュートリアル(データバインド編) » 05.todoアプリ データモデルの作成

05.todoアプリ データモデルの作成

Last modified by masaru-yokoyama on 2013/07/11, 21:12

TODOの情報をデータモデルを使って定義します。
このページで説明するコードは、サンプルコードのtodoModel.jsに記述されています。

スキーマを定義

TODOのデータを管理するToDoModelのスキーマを次のように定義します。

プロパティ名説明備考
idこのスキーマの主キーとなるプロパティNumber必須項目
status完了または未完了かのステータスを保持するBoolean完了の場合はtrueを未完了の場合はfalseを保持する
checkedステータス(画面表示用)文字列statusに依存する。statusがtrueの場合"checked"をそれ以外の場合はnullを保持する
contentTODO内容String
contentStyleTODO内容のCSSスタイル(画面表示用)Stringstatusに依存する。statusがtrueの場合"line-through"をそれ以外の場合は空文字を保持する
insertDate登録日numberミリ秒で保持する
ymdhms登録日年月日時分秒(画面表示用)StringinsertDateに依存する。『YY/MM/DD HH:MM:SS』でフォーマットされた日付の文字列を保持する

データマネージャの作成

まずは、データモデルを管理するために必要な、データモデルマネージャToDoManagerを作成します。

// データモデルマネージャ"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も作成します。

function toYMDHMS(value) {
   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;
}

データモデルの作成は以上です。
次の章では、データモデルを結果として表示させるために必要なビューを作成します。

次のステップ ⇒ サンプルアプリ ビューの作成


Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.