07.todoアプリ ロジックの作成
本章では、データモデルToDoModelにデータアイテムを登録する処理や、データアイテムの更新や削除を行う処理を実装します。
ここで実装したメソッドは、次章で作成するコントローラで使用します。
このページで説明するコードは、サンプルコードのtodoLogic.jsに記述されています。
ロジックの構成
TodoModelを操作するためのロジックToDoLogicを作成します。
ToDoLogicには以下のメソッドを実装します。
メソッド名 | 戻り値 | 説明 |
---|---|---|
init() | void | サーバからTODOのデータを取得する(サンプルコードではjsonファイルから読み込んでいます) |
getItem(Number id) | DataItem | 指定されたアイテムIDに紐づくデータアイテムを取得します |
add(String content) | void | TODOの内容をデータモデルに登録します |
remove(Nubmer id) | void | 指定されたアイテムIDに紐づくデータアイテムをモデルから削除します。 |
update(id, data) | void | 指定されたアイテムIDに紐づくデータアイテムを更新します。 |
getDetail(Number id) | ObservableArray[DataItem] | 指定されたアイテムIDに紐づくデータアイテムが格納されたObservableArrayを取得します。 |
また、ToDoLogicは以下のプロパティを持っています。
プロパティ名 | 型 | 説明 |
---|---|---|
model | DataModel | sample.todo.model.ToDoModel |
todos | ObservableArray[DataItem] | 一覧表示で使用するデータアイテムを保持するObservableArray |
detail | ObservableArray[DataItem] | 詳細表示で使用するデータアイテムを保持するObservableArray |
todosはTODO一覧を表示するために必要な配列で、コメントテンプレートtmplTodos内に記述されているdata-h5-loop-context="todos"にバインドします。
また、detailはTODOの詳細を表示するために必要な配列で、コメントテンプレートtmplDetail内に記述されているdata-h5-loop-context="detail"にバインドします。
コメントビューにObserbableArrayをバインドすると、配列が操作(要素の追加、更新または削除)されると、その操作が自動的にビューに反映されるようになります。
サンプルコード
ToDoLogicのコードは以下のとおりです。
var todoLogic = {
__name: 'sample.todo.logic.TodoLogic',
/**
* TODOモデル
*/
model : sample.todo.model.ToDoModel,
/**
* 一覧表示用ObservableArray
*/
todos : h5.core.data.createObservableArray(),
/**
* 詳細表示用ObservableArray
*/
detail : h5.core.data.createObservableArray(),
/**
* サーバからTODOデータを取得します。
* <p>
* ※今回はjsonファイルのサンプルデータを読み込んでいます。
*
* @returns {Promise} Promiseオブジェクト
*/
init: function() {
var df = this.deferred();
var that = this;
$.ajax({
url: SAMPLE_DATA_FILEPATH,
dataType: 'json',
cache: false,
success: function(data) {
var dataItems = that.model.create(data);
that.todos.copyFrom(dataItems);
df.resolve(that.todos);
},
error: function() {
alert('サンプルデータの読み込みに失敗しました。');
}
});
return df.promise();
},
/**
* 指定されたIDに紐づくデータアイテムを取得します。
*
* @return {DataItem} TODOデータアイテム
*/
getItem: function(id) {
return this.model.get(id);
},
/**
* ToDoモデルにデータの登録し、一覧表示用ObservableArrayにデータアイテムを追加します。
*
* @param content {String} TODO内容
*/
add: function(content) {
var item = this.model.create({
id: this._getNewId(),
status: false,
content: content,
insertDate: +new Date()
});
this.todos.push(item);
},
/**
* 指定されたアイテムIDに紐づくデータアイテムをモデルから削除します。
*
* @param id {Number} アイテムID
*/
remove: function(id) {
for ( var i = 0, len = this.todos.length; i < len; i++) {
var item = this.todos[i];
var itemId = item.get('id');
if (itemId === id) {
this.model.remove(id);
this.todos.splice(i, 1);
this.detail.pop();
break;
}
}
},
/**
* 指定されたアイテムIDに紐づくデータアイテムを更新します。
*
* @param id {Number} アイテムID
* @param data {Object} 更新データ
*/
update: function(id, data) {
var item = this.model.get(id);
item.set(data);
},
/**
* 指定されたアイテムIDに紐づくデータアイテムが格納されたObservableArrayを取得します。
*
* @param id {Number} アイテムID
* @returns データアイテムが格納されたObservableArray
*/
getDetail: function(id) {
var item = this.model.get(id);
this.detail.splice(0, 1, item);
return this.detail;
},
/**
* アイテムIDを採番します。
*
* @returns {Number} アイテムID
*/
_getNewId: function() {
for ( var i = 1;; i++) {
if (!this.model.has(i)) {
return i;
}
}
}
};
// sample.todo.logic.ToDoLogicでグローバルに公開する
h5.core.expose(todoLogic);
this.modelには、グローバルに公開したToDoModelを設定しています。
各メソッドはこのモデルを操作します。
ロジックの作成は以上です。
次の章ではコントローラを作成します。画面で入力された情報をコントローラで受け取った後、本章で作成したロジックを呼び出してデータモデルの操作を行います。
次のステップ ⇒ サンプルアプリ コントローラの作成