Today I Learned

A Hashrocket project

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!