Templates.helpers.mut()

The mut helper lets you clearly specify that a child Component can update the (mutable) value passed to it, which will change the value of the parent component.

This is very helpful for passing mutable values to a Component of any size, but critical to understanding the logic of a large/complex Component.

To specify that a parameter is mutable, when invoking the child Component:

{{my-child childClickCount=(mut totalClicks)}}

The child Component can then modify the parent's value as needed:

// my-child.js
export default Component.extend({
  click() {
    this.get('childClickCount').update(this.get('childClickCount').value + 1);
  }
});

Additionally, the mut helper can be combined with the action helper to mutate a value. For example:

{{my-child childClickCount=totalClicks click-count-change=(action (mut totalClicks))}}

The child Component would invoke the action with the new click value:

// my-child.js
export default Component.extend({
  click() {
    this.get('clickCountChange')(this.get('childClickCount') + 1);
  }
});

The mut helper changes the totalClicks value to what was provided as the action argument.

See a 2.0 blog post for additional information on using {{mut}}.