mut (attr) public
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:
1 | {{my-child childClickCount=(mut totalClicks)}} |
The child Component can then modify the parent's value as needed:
1 2 3 4 5 6 | // my-child.jsexport 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:
1 | {{my-child childClickCount=totalClicks click-count-change=(action (mut totalClicks))}} |
The child Component would invoke the action with the new click value:
1 2 3 4 5 6 | // my-child.jsexport 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}}.
Parameters:
-
attr
[Object] - the "two-way" attribute that can be modified.
Please login to continue.