Question

In my nested list I have two html buttons. I already have a listener for the nested list that displays the detailCard holding the two buttons, but I would like to add another listener that does some action when one of the buttons is pressed. Each button does something different, so I have been unable to delegate one of the buttons to a particular function. Is there a way to do something like:

listeners : {
element  : 'element',
delegate : 'button.mybutton',
tap      : function() {
    //...
  }
}

but for multiple delegates where each delegate does something else?

Was it helpful?

Solution

You could add data attributes to your buttons and react accordingly:

<button data-do="showDetailCard">
<button data-do="anotherAction">

// ...

listeners: {
    tap: {
        element: 'element',
        delegate: 'button',
        fn: 'doAction'
    }
}

// ...

function doAction(event) {
    var do = event.target.dataset.do;
    if (do === 'showDetailCard') {
        // show detail card
    } else if (do === 'anotherAction') {
        // do another action
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top