Attaching Event Callbacks is a useful way to attach an event from the parent control to the child control. This is very useful for cases like, if the child control has a lot of unique functions to carry out, e.g. a div that have toggle-able 3 buttons. Attaching event callbacks establishes direct link from the parent directly to the child control themselves as opposed to event bubbling.
In most cases, this method is very practical in list and repeaters. In list / repeater, being a parent control can have many child control items. For those whom are new in repeater, repeater is basically a non scroll-able list design to do heavy weight interactivity. It is not advisable to use repeater if you have more than 100 sets of it. You should simplify the design and go for list instead.
Side Note: List kind is very unique compared to many other control where, controls are suppressed from event bubbling ( this is due to performance, too much event bubbling will disrupt the list scrolling and rendering, this also make list perform faster compared to repeaters ). The only way to capture event is by using this method, attaching event callback. Don’t even bother console.log the handled event, just do the callback to the parent and console from there.
Events are captured first by the child then, will trigger back as function to the parent as a callback.
To attached an event callback, I’ve prepare a sample using repeater. Each repeater will have two buttons, the red will paint the background as red and green for greenish background. All done using event callback. Then there’s another event called onflick which will painted blue. See sample modification I’ve made for SampleRepeater.js which will load another kind of it’s child called RepeaterItem.js.
SampleRepeater.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | enyo.kind({ name: "SampleRepeater", fit:true, classes: "enyo-unselectable padding15px formBg", components: [ { // This is how repeater works looks exactly like List but, they dont // have scroller by default with them. Usually, they will scroller with // the help of additional scroller as their parent. name: "myRepeater", kind: "Repeater", count:0, touch:true, onSetupItem: "setupItem", components: [ { name: "item", classes:"listItemContainer", // I've removed this event, and shift the listen to the RepeaterItem itself. //ontap:'listItemTapped', components: [ { // RepeaterItem is a special control item, that will // repeat itself, when the count length is set. name: "itemSpecial", kind:"RepeaterItem", // Attaching callbacks. onItemFlicked:"handleItemFlicked", onButtonsTapped:"handleButtonTapped" } ] } ] } ], create: function(inSender,inEvent){ this.inherited(arguments); // Let's create 10 simple repeaters. this.$.myRepeater.setCount(10); }, setupItem:function(inSender,inEvent) { // Each time a repeater is setCount, an item proxy will appear. // This will automatically represent the child control of the repeater. // console.log(inEvent.item); // To access the itemSpecial's properties and method. inEvent.item.$.itemSpecial.setTitle("Title "+(inEvent.index + 1)); }, handleItemFlicked:function(inSender,inEvent) { console.log("This is the whole list item being flicked..."); // telling the item to render a new class on it's background. inSender.resetColor(); inSender.addClass("blueBg"); }, handleButtonTapped:function(inSender,inEvent) { console.log("This is the list buttons are being tapped..."); //inSender.resetColor(); console.log(inEvent); inSender.resetColor(); inSender.addClass(inEvent.colorClass); } }); |
RepeaterItem.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | enyo.kind({ name: "RepeaterItem", kind: "Control", style:"padding:10px;", //Never places events prior components node. Always place after components. //Nest them if you must. components:[ { // Placing onflick after components node. onflick:"handleFlicked", layoutKind: "FittableColumnsLayout", components: [ { tag:"h1", name:"title", style:"width:50%", content: "Set Title..." }, { style:"width:50%;text-align:right", components:[ { kind:"onyx.Button", name:"btnA", colorClass:"redBg", classes:"buttonA", content:"Button A", ontap:"handleButtonTapped" }, { kind:"onyx.Button", name:"btnB", colorClass:"greenBg", classes:"buttonB", content:"Button B", ontap:"handleButtonTapped" } ] } ] } ], // I'm also making use of published methods here. published:{ title:"Set Title..." }, // Attaching callbacks in events node. // To connect a callback, simply replace on with do prefix to the callback name. events:{ // Leave it empty, onItemFlicked and onButtonsTapped is what you should // use outside the parent. See SampleRepeater. onItemFlicked:"", onButtonsTapped:"" }, titleChanged:function(){ this.$.title.setContent(this.title); }, resetColor:function() { this.removeClass("blueBg"); this.removeClass("redBg"); this.removeClass("greenBg"); }, handleButtonTapped:function(inSender,inEvent){ // Noticed I've replaced "on" with "do", to connect a callback. // By default, the events will always fire inSender, inEvent back to parent. // You can append object to inEvent with adding a parameter to it. // In our case, we pushed inSender which is the button control object // back to the parent as inEvent. this.doButtonsTapped(inSender); }, handleFlicked:function(inSender,inEvent){ // Noticed I've replaced "on" with "do", to connect a callback to the handlers. this.doItemFlicked(); } }); |
Implementation of repeater is as simple as that. And today’s tutorial…
EnyoJS Tutorial #8 (1383 downloads)