Ember {{on}} vs {{action}} caveat

Today I learned one important difference between the traditional way of invoking actions in Ember via an action helper:

<button {{action "submit"}}>
  Click me!
</button>

And via the new on element modifier:

<button {{on "click" this.submit}}>
  Click me!
</button>

The subtle, yet important thing is that action helper prevents default browser action, but on element modifier does not.

Why is this important? If you'd have the buttons from the example above inside a <form> tag, then the first button will work as expected (action will be triggered), but second button will cause an unexpected full page reload on click.

Ways to fix

Two easy fixes come to my mind:

Either you can change the type of the button so that it does not trigger a submit:

<form>
  <button type="button" {{on "click" this.submit}}>
    Click me!
  </button>
</form>

Or you can use ember-event-helpers addon.