ember actions.md

Notes about Actions

1. you can call any function from the template, but it won't have 'this' context onclick={{myFunction}}

2. If you call any function with the action helper, it will now have the context onclick={{action myFunction}}

3. you should collect actions together in the actions hash, use by passing action name in quotes. onclick={{action 'thing'}}

4. You can pass parameters as space separated values onclick={{action 'actionName' 'param1' 'param2'}}

5. the "event" of the action is passed as the last paramater to you

6. you can modify the first paramter passed using value="" oninput={{action "actionName" "bob" value="length"}} would give you 3

7. You can call the action on some other object by doing target=thatObject

8. the oninput, onclick etc. are just dom events https://developer.mozilla.org/en-US/docs/Web/Events

9. You can shortcut onclick={{action 'thing'}} by doing <element {{action 'thing'}}> which will also preventDefault for you. It will also bubble the action up your controller tree. 9a) You can customize the shortcut event using on= (list here https://guides.emberjs.com/v2.14.0/components/handling-events/) 9b) You can not preventDefault by doing preventDefault=false 9c) Normally using the shortcut you can't have keys held down when you click, you can allow that using allowedKeys="someKey"

10. The quick way of doing a 2 way input bind is <input type="text" value={{inputValue}} oninput={{action (mut inputValue) value="target.value"}}/> 10a) the (mut thing) is a shortcut to making an action that does

    ```
    actions: {
    	updateInput(val) {
    		this.set('inputValue', val);
    	}
    }
    ```
    

11. You can pass actions around, and they retain their context and curry their params. {{my-comp passedAction=(action 'someAction')}} 11a) You can call that in the component with this.get('passedAction')() 11b) You can call that in the component's hbs with <el onclick={{action passedAction}}> or with shortcut <el {{action passedAction}}>

12. Components can define dom events right on the component. List of events (list here https://guides.emberjs.com/v2.14.0/components/handling-events/)

    	export default Ember.Component.extend({
    		click(event) {
    
    		}
    		keyUp(event) {
    
    		}
    	});
    

13. You can call other actions as functions in your code by using this.send('actionName');

14. You can call an action on a parent context from inside a component using this.sendAction('actionOnParentContext') Though the preferred way to do this is to pass the action into the component (see #11)