Search code examples
appceleratortitanium-alloy

Appcelerator data-binding widgets and click event

I am trying to build the following calendar widget Calendar screenshot

widgets/com.ui.calendar/views/widget.xml

<Alloy>
<Collection src="CalendarDay" instance="true" id="dateColl"></Collection>
<View id="calHolder" height="Ti.UI.SIZE" layout="vertical">
    <ScrollView id="calBody" layout="horizontal" height="Ti.UI.SIZE" width="Ti.UI.FILL" dataCollection="$.dateColl">
        <Widget src="com.ui.calendar" name="daytile"></Widget>
    </ScrollView>
</View>

widgets/com.ui.calendar/views/daytile.xml

<Alloy>
<View id="calDayTile" layout="vertical" onClick="selectMe" bindId="{FullDate}">
    <Label id="calDayTileDay" text="{day}" width="Ti.UI.FILL"></Label>
    <Label id="calDayTileDate" text="{date}" width="Ti.UI.FILL"></Label>
</View>

This renders the UI fine as shown in screenshot above.

Now I want to bind a click handler so what when a day is clicked I can show that tile as selected and pass the selected date to parent controller.

<Widget src="com.ui.calendar" name="daytile" onClick="dateSelected"></Widget>

I end up with following error:

[ERROR] :  Script Error {
[ERROR] :      column = 18;
[ERROR] :      line = 34;
[ERROR] :      message = "__alloyId213.getViewEx({\n                    recurse: true\n            }).on is not a function. (In '__alloyId213.getViewEx({\n                recurse: true\n            }).on(\"click\", dateSelected)', '__alloyId213.getViewEx({\n                recurse: true\n            }).on' is undefined)";
[ERROR] :      sourceURL = "file:///Users/npatel/Library/Developer/CoreSimulator/Devices/A7BDE792-2DA3-4B3E-807B-505F4212AE96/data/Containers/Bundle/Application/8826886B-22B4-4586-A193-75D5EB3F204A/FieldServiceMobilityStage.app/alloy/widgets/com.ui.calendar/controllers/widget.js";
[ERROR] :  }

Any pointers as to how to handle events in such a scenario?

Solution

  • I moved the event handling to parent container.

            <ScrollView id="calBody" layout="horizontal" height="Ti.UI.SIZE" width="Ti.UI.FILL" onDateselected="dateSelected" dataCollection="$.dateColl" dataFunction="refreshCalendar">