Search code examples
javascriptcssrepeaterenyo

How to style Repeater item background color ontap?


I have a repeater of items in a Enyo app. In the current setup tapping the repeater item doesn't show a transition or visual cue to show it's been tapped.

So what I tried is setting the class of the repeater item passed in from the ontap event on the repeater.

But stepping into Dev tools tells me that the property addClass is not defined:

IncidentTickets.js:653 Uncaught TypeError: Cannot read property 'addClass' of undefined

Question:

How can you style an Enyo Repeater item background color ontap?

Basically I set a CSS style background color to green:

.tapped {
    background: #0CA281;
}

The tried to add the CSS class to that repeater item passed into the onTap event:

tapPopupBundle: function(inSender, inEvent) {

    var item = this.$.repeaterBundle.itemAtIndex(inEvent.index);
    this.item.addClass('tapped');


},

And this is the definition of the repeater kind:

{kind: "Scroller", name: "scrollerBundle",  touch: true, horizontal:"hidden", showing: false, style: "height: 70%", components: [
                {content:"All Apps", style: "font-size: 12px; font-weight: bold; margin-left: 20px; text-decoration:underline;",ontap: 'clearFilters'},
                {kind: "Repeater", name: "repeaterBundle", count: 0, onSetupItem: "setupBundle", ontap: "tapPopupBundle", components: [
                   {tag: "br"},
                   { kind: "FittableColumns",  components: [
                        {name: "repBundle", style: "font-size: 12px; font-weight: bold; margin-left: 20px;"}
                   ]}
                ]},
             ]},

Solution

  • Grabbing the passed in item id and calling appLlyStyle worked in this case:

    item.$.repAppName.applyStyle("background-color", 'rgb(12,162,129)');