Titaniumで、listViewのitemView内のオブジェクトへのイベント設置方法

2014/03/06

意外と日本語の記述が見つからないので、iOS環境で動かしながら調べたことを残しておきます。

listView基本

サンプルコードは以下

var template1 = {
    childTemplates: [
    {
        type: 'Ti.UI.ImageView',
        bindId: 'profile',
        properties: {
            image:"/path/to/image.png" ,
        },
        events:{
            'click':function(e){
                alert('imageview lick');
            }
        }
    },                    
    ]
};

var listSection = Titanium.UI.createListSection();

var listView = Titanium.UI.createListView({
    sections: [listSection],
    templates: { 'plain': template1 },
    defaultItemTemplate: 'plain'  ,
});
itemViewへのイベント設定

itemViewをタップした場合のイベント、itemclickは用意されていますのでこれでいいです

    listView.addEventListener('itemclick', function(e){
        // 処理
    });
itemView内オブジェクトへのイベント設定

itemViewにaddしたオブジェクトに別途イベントを設置したい場合、記述は以下になります。

    template1.childTemplates[0].events = {
        'click':clickEvent
    };
    function clickEvent(e){
        // 処理
    }

つまり

テンプレート.テンプレート名[イベント設置したいオブジェクトのindex].events = {‘イベント名’:イベント処理関数}

という形です。今回で言うとchildTemplatesの0番目のimageViewにclickイベントを設置しました。

複数のイベント設定

複数指定する場合、

    plainTemplate.childTemplates[0].events = {
        'click':clickEvent,
        'swipe':delete,
    };
    function clickEvent(e){
        // イベント内処理
    }
    function delete(e){
        // イベント内処理
    }

こうなります。
また、templateに直接指定することもできます。

var template1 = {
    childTemplates: [
    {
        type: 'Ti.UI.ImageView',
        bindId: 'profile',
        properties: {
            image:'path/to/image.png',
        },
        events:{
            'click':function(e){
                alert('click imageview');
            }
        }
    },                    
    ]
};

ただ、このままだとimageViewをclickさせても、itemViewのitemclickイベントも発火するので、itemView内に別途イベントを設置する場合、itemclickイベントは設定しないようにしましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です