Here are some tips regurding capturing "tap" events on itemTemplate on FilterList.
1. Define HTML Mojo object
<div x-mojo-element="FilterList" class="filterlistClass" id="filterlistID" x-mojo-focus-highlight="true"></div>
2. Difine the "filterlistID" in the .js file.
var attributes =
{
itemTemplate: 'food-filter-list/entry',
swipeToDelete: bSwipeToDelete,
reorderable: false,
filterFunction: this.list.bind(this),
formatters:{Food_Item:this.formatName.bind(this),Points:this.formatNumber.bind(this)},
delay: 500, //1 second delay before filter string is used
disabledProperty: 'disabled'
};
this.model = {
disabled: false
};
this.controller.setupWidget('filterlistID', attributes, this.model);
this.tapped = this.tapped.bindAsEventListener(this);
Mojo.Event.listen(this.controller.get('filterlistID'), Mojo.Event.listTap, this.tapped);
3. Int the entry.html file defined for the itemTemplate define
<div class="palm-row" x-mojo-tap-highlight="momentary">
<div class="palm-row-wrapper">
<table width="100%">
<tr>
<td width="90%"><div class="title"><font face="Comic Sans MS, Arial, Impact" size="3">
#{Food_Item} has the value of #{Points} DC Points
</font></div></td>
<td width="10%">
<div class="palm-button InfoBtnCL" id="InfoBtnID"></div>
</td>
</tr>
<tr>
<div id='AdditionalInfoID'>
</div>
</tr>
</table>
</div>
</div>
</div>
now we want to capture the click event of the InfoBtnID button right?
4. in the .js file tapped function
FoodFilterListAssistant.prototype.tapped = function(event)
{
Mojo.Log.info("*************** Tapped " + event.originalEvent.target.id );
if(event.originalEvent.target.alt!=undefined && event.originalEvent.target. id == "InfoBtnID")
{
//code for clicking on the InfoBtnID button
}
else
{
//code for tapping the list item
}
}
0 comments