machty / emblem.js

Emblem.js - Ember-friendly, indented syntax alternative for Handlebars.js
http://emblemjs.com
MIT License
1.04k stars 81 forks source link

is it possible to pass the "event" object to a bound action on an html element? #293

Closed kjhangiani closed 7 years ago

kjhangiani commented 7 years ago

See this example here: https://guides.emberjs.com/v2.11.0/templates/actions/#toc_modifying-the-action-s-first-parameter

Note that its possible to use the onblur or onclick binding to change ember to actually pass event as the first param to your action. I can't figure out an equivalent way to do this in emblem

I tried:

button click="whatever" seems to be equvialent to button{action "whatever"} (which has no event object in the arguments of the action)

I tried:

button onclick="{{action 'whatever'}}" button onclick=(action "whatever") button onclick={action "whatever"}

but none of them seem to work as I expected - actually, I did see the event object passed in the arguments, but the action itself didn't work, the page just reloaded.

Perhaps just a mistake on my part - but is there a supported way to do this in emblem?

thec0keman commented 7 years ago

using { } around your action should work.

The reason is the difference between attribute / values inside a handlebars statement and on an HTML element. The former uses subexpressions for a closure action, the latter inserts handlebars into an HTML element. Those seem like different enough results that it warrants different syntax in Emblem.

So:

button onclick={ action 'whatever' } 
=> <button onclick={{action 'whatever'}}>

= my-component click=(action 'foo') 
=> {{ my-component click=(action 'foo') }}

I'm sorry that the emblem guides are so out of date. (Right now the test suite is the best documentation!)

kjhangiani commented 7 years ago

Thanks - got it working. I tried that at first, but it wasn't working (due to my action having a parameter).

This didn't work:

button onclick={ action "previewAttachment" attachment }

I could see the arguments in console briefly, but the page would reload, and I saw an empty query param appear for a second in the url, just a ? mark.

however, this does work:

button onclick={ action (action "previewAttachment" attachment) }

kjhangiani commented 7 years ago

Nevermind, it was my mistake - somehow the tag being a button vs div was causing the issue - changing it to div worked - ignore my prior comment lol