Let's talk about Ember's {{ mut }} HTMLBars helper

You've likely seen code that looks like the below since Ember 1.13 was released:

{{ my-component updateAction=(action (mut model.value)) }}

And been confused as to what this means. Luckily, @rwjblue explained in the EmberJS Community slack that:

Which kinda clears things up. It'd be a little easier if we could correlate the mut helper with something a bit more familiar. The above my-component snippet could be rewritten like so:

export default Ember.Controller.extend({
  actions: {
    updateValue(newValue) {
      this.set('model.value', newValue);
    }
  }
});

and

{{my-component updateAction=(action 'updateValue')}}

To restate the exposition from @rwjblue above... The mut helper returns a mutable object which is an object that responds to update. The action helper knows about these objects and knows to call update (passing in the new value) when given a mutable object .

This is a great shorthand that enables us to write a LOT less boilerplate code, but does require a little bit of understanding so that we don't confuse each other.

---

The above information was shamelessly stolen from the EmberJS Community Slack. If you'd like to participate join by going here: Ember Community Slack Invite Page to get your invite.

Cheers!

Tweet