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イベントは設定しないようにしましょう。

コメントを残す

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