Amphtml: Only last action gets triggered when there are multiple actions for an event on an element.

[avimehta]

The following scenario is made-up because the method go() on carousel is not really callable but assuming that it was, I could write a tag as follows:

<amp-img .... on="tap:carousel1.go(1,false);tap:carousel2.go(1,false)">

Taping this tag should make both carousels go to next item. Currently it doesn't because the actions are keyed by event and the last action overrides everything that was set before it.

Is it possible to fix this so that methods on different targets can be triggered when an event occurs?

[avimehta]

if you guys think that this is a real issue, I can help with fixing it.

[dvoytenko]

Hmm. I'll give it a thought. Thanks for the suggestion. I'm thinking to reduce a possibility of error it could be a bit better to do:

<amp-img .... on="tap:carousel1.go(1,false),carousel2.go(1,false)">

But I need to think through this. We restricted this protocol on purpose.

Is this a use case you are considering for your documents?

[dvoytenko]

Let's close this for now until other considerations are clear.

[ram-you]

Hi @dvoytenko
I want to trigger 2 or more actions for the same event, hide 2 or more elements, for example.
I tried your method : <amp-img .... on="tap:carousel1.go(1,false),carousel2.go(1,false)"> but not working
Thank you.

[dvoytenko]

@ram-you Correct. This is not implemented.

@ericlindley-g Let's prioritize. I'll re-open this issue.

[ericlindley-g]

@dvoytenko Sounds good — this becomes more important with the binding protocol becoming available

FYI @choumx

[choumx]

Agree with Eric since on="tap:AMP.setState()" may become more prevalent, which would block other tap actions.

However, not an issue with this specific example though since carousel.goToSlide() action can be replaced with a [slide] binding.

[aghassemi]

I am planning to add support for this over the next few weeks.

[kul3r4]

Maybe there is another case as tap event could also be used to hide an element, like explained here .
Let's take this example:
You have multiple carousels (each one with multiple images and it own gallery) and a selector with 3 options. When you click on option 1, you want to show carousel 1 and hide carousel 2 and 3. At the same time, when you click on option 1 you want to set the variable "selectedSlide" to 0, so that you can always start with the first slide of the carousel.
You could achieve this by using another variable associated to a css class which will show and hide the element, but would be easier to use the approach from the link above, where, in order to hide an element, you could do:
<button on="tap:warning-message.hide">Cool, thanks!</button>
Would that be possible?

[alanorozco]

Taking over this.

@dvoytenko @aghassemi

Agreement on what the preferred syntax should be?

A)

 <amp-img .... on="tap:carousel1.go(1,false);tap:carousel2.go(1,false)">

B)

<amp-img .... on="tap:carousel1.go(1,false),carousel2.go(1,false)">

[aghassemi]

@alanorozco, B