開発者ブログ
チュートリアル(データバインド編) » 07.todoアプリ ロジックの作成

07.todoアプリ ロジックの作成

Last modified by kashi on 2014/01/08, 10:55

本章では、データモデルToDoModelにデータアイテムを登録する処理や、データアイテムの更新や削除を行う処理を実装します。
ここで実装したメソッドは、次章で作成するコントローラで使用します。

このページで説明するコードは、サンプルコードのtodoLogic.jsに記述されています。

ロジックの構成

TodoModelを操作するためのロジックToDoLogicを作成します。

ToDoLogicには以下のメソッドを実装します。

メソッド名戻り値説明
init()voidサーバからTODOのデータを取得する(サンプルコードではjsonファイルから読み込んでいます)
getItem(Number id)DataItem指定されたアイテムIDに紐づくデータアイテムを取得します
add(String content)voidTODOの内容をデータモデルに登録します
remove(Nubmer id)void指定されたアイテムIDに紐づくデータアイテムをモデルから削除します。
update(id, data)void指定されたアイテムIDに紐づくデータアイテムを更新します。
getDetail(Number id)ObservableArray[DataItem]指定されたアイテムIDに紐づくデータアイテムが格納されたObservableArrayを取得します。

また、ToDoLogicは以下のプロパティを持っています。

プロパティ名説明
modelDataModelsample.todo.model.ToDoModel
todosObservableArray[DataItem]一覧表示で使用するデータアイテムを保持するObservableArray
detailObservableArray[DataItem]詳細表示で使用するデータアイテムを保持するObservableArray

todosはTODO一覧を表示するために必要な配列で、コメントテンプレートtmplTodos内に記述されているdata-h5-loop-context="todos"にバインドします。
また、detailはTODOの詳細を表示するために必要な配列で、コメントテンプレートtmplDetail内に記述されているdata-h5-loop-context="detail"にバインドします。

コメントビューにObserbableArrayをバインドすると、配列が操作(要素の追加、更新または削除)されると、その操作が自動的にビューに反映されるようになります。

サンプルコード

ToDoLogicのコードは以下のとおりです。

var SAMPLE_DATA_FILEPATH = 'json/sampleData.json';


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を設定しています。
各メソッドはこのモデルを操作します。

ロジックの作成は以上です。
次の章ではコントローラを作成します。画面で入力された情報をコントローラで受け取った後、本章で作成したロジックを呼び出してデータモデルの操作を行います。

次のステップ ⇒ サンプルアプリ コントローラの作成


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