EmberJS Amsterdam - Closure Actions

Transcript

1. CLOSURE ACTIONS EMBER.JS
2. MARTEN SCHILSTRA @martndemus HELLO MY NAME IS:
3. I WORK FOR:
4. CLOSURE ACTIONS EMBER.JS
5. CLASSIC ACTIONS BEFORE CLOSURE ACTIONS
6. <button {{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
7. <button {{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
8. <button {{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS element action keyword
9. <form {{action “submit” on=“submit”}}>
 <!—— form fields ——>
 <input type=“submit” />
 </form> BINDING ACTIONS TO HTML ELEMENTS
10. {{#x-button action=“save”}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
11. {{#x-button action=“save”}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
12. {{#x-button action=“save”}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS an attribute
13. actions: {
 submit() {
 this.sendAction();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
14. actions: {
 submit() {
 this.sendAction();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
15. actions: {
 submit() {
 this.sendAction();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT actions hash
16. actions: {
 submit() {
 this.sendAction();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
17. actions: {
 submit() {
 this.sendAction();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
18. actions: {
 saveModel() {
 // saves model
 },
 
 submit() {
 this.send(‘saveModel’);
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
19. actions: {
 saveModel() {
 // saves model
 },
 
 submit() {
 this.send(‘saveModel’);
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
20. LOOKS GOOD
21. LOOKS GOOD, RIGHT?
22. BUBBLING UP COMPONENTS
23. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
24. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
25. // controllers/login.js
 actions: {
 login(username, password) {
 // logic
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
26. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
27. // components/login-form.js
 actions: {
 submit() {
 this.sendAction(‘login’,
 get(this, ‘username’),
 get(this, ‘password’));
 }
 } {{! templates/components/login-form.hbs }}
 {{#x-button action=“submit”}}
 Login
 {{/x-button}} COMPONENTS/LOGIN-FORM
28. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
29. // components/x-button.js
 actions: {
 click() {
 this.sendAction();
 }
 } {{! templates/components/x-button.hbs }}
 <button {{action “click”}}>
 {{yield}}
 </button> COMPONENTS/X-BUTTON
30. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
31. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
32. // components/x-button.js
 actions: {
 click() {
 this.sendAction();
 }
 } {{! templates/components/x-button.hbs }}
 <button {{action “click”}}>
 {{yield}}
 </button> COMPONENTS/X-BUTTON
33. // components/x-button.js
 actions: {
 click() {
 this.sendAction();
 }
 } {{! templates/components/x-button.hbs }}
 <button {{action “click”}}>
 {{yield}}
 </button> COMPONENTS/X-BUTTON
34. // components/x-button.js
 actions: {
 click() {
 this.sendAction();
 }
 } {{! templates/components/x-button.hbs }}
 <button {{action “click”}}>
 {{yield}}
 </button> COMPONENTS/X-BUTTON
35. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
36. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
37. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
38. // components/login-form.js
 actions: {
 submit() {
 this.sendAction(‘login’,
 get(this, ‘username’),
 get(this, ‘password’));
 }
 } {{! templates/components/login-form.hbs }}
 {{#x-button action=“submit”}}
 Login
 {{/x-button}} COMPONENTS/LOGIN-FORM
39. // components/login-form.js
 actions: {
 submit() {
 this.sendAction(‘login’,
 get(this, ‘username’),
 get(this, ‘password’));
 }
 } {{! templates/components/login-form.hbs }}
 {{#x-button action=“submit”}}
 Login
 {{/x-button}} COMPONENTS/LOGIN-FORM
40. // components/login-form.js
 actions: {
 submit() {
 this.sendAction(‘login’,
 get(this, ‘username’),
 get(this, ‘password’));
 }
 } {{! templates/components/login-form.hbs }}
 {{#x-button action=“submit”}}
 Login
 {{/x-button}} COMPONENTS/LOGIN-FORM
41. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
42. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
43. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
44. // controllers/login.js
 actions: {
 login(username, password) {
 // logic
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
45. // controllers/login.js
 actions: {
 login(username, password) {
 // logic
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
46. {{login-form login=“login”}} {{x-button action=“submit”}} <button {{action “click”}}> login components/login-form components/x-button BUBBLING UP COMPONENTS
47. RETURN VALUES
48. {{login-form login=“login”}} <button {{action=“submit”}}> login components/login-form RETURN VALUES
49. {{login-form login=“login”}} login components/login-form RETURN VALUES <button {{action=“submit”}}>
50. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
51. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
52. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
53. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
54. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
55. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
56. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
57. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
58. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form action=“login”}} LOGIN
59. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form action=“login”}} LOGIN
60. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
61. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
62. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
63. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
64. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
65. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
66. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
67. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
68. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
69. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
70. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
71. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
72. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
73. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }}
 {{login-form login=“login”}} LOGIN
74. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
75. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
76. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
77. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
78. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
79. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 {{#x-button action=“submit”}}
 Login
 {{/x-button}}
 {{/if}} COMPONENTS/LOGIN-FORM
80. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 {{#x-button action=“submit”}}
 Login
 {{/x-button}}
 {{/if}} COMPONENTS/LOGIN-FORM
81. {{login-form login=“login”}} login components/login-form RETURN VALUES user <button {{action=“submit”}}>
82. CLOSURE ACTIONS INTRODUCING
83. {{! before}}
 <button {{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
84. {{! before}}
 <button {{action “submit”}}>
 Submit
 </button> {{! with closure actions}}
 <button onclick={{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
85. <button onclick={{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
86. <button onclick={{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS
87. <button onclick={{action “submit”}}>
 Submit
 </button> BINDING ACTIONS TO HTML ELEMENTS closure action keyword
88. {{! before}}
 <form {{action “submit” on=“submit”}}>
 <!—— form fields ——>
 </form> BINDING ACTIONS TO HTML ELEMENTS
89. {{! before}}
 <form {{action “submit” on=“submit”}}>
 <!—— form fields ——>
 </form> {{! with closure actions}}
 <form onsubmit={{action “submit”}}>
 <!—— form fields ——>
 </form> BINDING ACTIONS TO HTML ELEMENTS
90. <form onsubmit={{action “submit”}}>
 <!—— form fields ——>
 </form> BINDING ACTIONS TO HTML ELEMENTS
91. <form onsubmit={{action “submit”}}>
 <!—— form fields ——>
 </form> BINDING ACTIONS TO HTML ELEMENTS
92. <form onsubmit={{action “submit”}}>
 <!—— form fields ——>
 </form> BINDING ACTIONS TO HTML ELEMENTS event attribute on element
93. {{! before}}
 {{#x-button action=“submit”}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
94. {{! before}}
 {{#x-button action=“submit”}}
 Submit
 {{/x-button}} {{! with closure actions}}
 {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
95. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
96. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS
97. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS closure action keyword
98. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}}
99. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}}
100. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}}
101. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}} no quotes!
102. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}}
103. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}} action called from actions hash
104. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}}
105. {{#x-button click=(action “submit”)}}
 Submit
 {{/x-button}} BINDING ACTIONS TO COMPONENTS {{#x-button click=(action submit)}}
 Submit
 {{/x-button}} action called from component attributes
106. // before
 actions: {
 submit() {
 this.sendAction(‘submit’);
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
107. // before
 actions: {
 submit() {
 this.sendAction(‘submit’);
 }
 } // with closure actions
 actions: {
 submit() {
 get(this, ‘submit’)();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
108. actions: {
 submit() {
 get(this, ‘submit’)();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
109. actions: {
 submit() {
 get(this, ‘submit’)();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
110. actions: {
 submit() {
 get(this, ‘submit’)();
 }
 } CALLING ACTIONS FROM YOUR COMPONENT
111. I THOUGHT YOU SHOULD USE this.attrs.submit();
112. NO YOU SHOULDN'T locks.svbtle.com/to-attrs-or-not-to-attrs by Ricardo “locks” Mendes
113. CLOSURE ACTIONS DEEP-DIVE INTO
114. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
115. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
116. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
117. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
118. // controllers/items.js
 actions: {
 saveItem(item) {
 item.save();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list saveItem=(action “saveItem”)}}
119. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
120. {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 saveItem=(action saveItem)}}
 {{/each}} COMPONENTS/ITEM-LIST
121. {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 saveItem=(action saveItem)}}
 {{/each}} COMPONENTS/ITEM-LIST no quotes!
122. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
123. {{! templates/components/item-detail.hbs
 <button onclick={{action saveItem item}}>
 Save
 </button> COMPONENTS/ITEM-DETAIL
124. {{! templates/components/item-detail.hbs
 <button onclick={{action saveItem item}}>
 Save
 </button> COMPONENTS/ITEM-DETAIL again no quotes!
125. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
126. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
127. {{! templates/components/item-detail.hbs
 <button onclick={{action saveItem item}}>
 Save
 </button> COMPONENTS/ITEM-DETAIL
128. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
129. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
130. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
131. {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 saveItem=(action saveItem)}}
 {{/each}} COMPONENTS/ITEM-LIST
132. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
133. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
134. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
135. // controllers/items.js
 actions: {
 saveItem(item) {
 item.save();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list saveItem=(action “saveItem”)}}
136. // controllers/items.js
 actions: {
 saveItem(item) {
 item.save();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list saveItem=(action “saveItem”)}}
137. {{item-list saveItem=(action “saveItem”)}} {{item-detail saveItem=(action saveItem)}} <button onclick={{action saveItem item}}> items components/item-list components/item-detail ACTION PASSING
138. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
139. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
140. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
141. // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list itemAction=(action “doAction”)}}
142. // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list itemAction=(action “doAction”)}}
143. // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list itemAction=(action “doAction”)}}
144. // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } ITEMS {{! templates/items.hbs
 {{item-list itemAction=(action “doAction”)}}
145. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
146. {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 itemAction=(action itemAction item)}}
 {{/each}} COMPONENTS/ITEM-LIST
147. {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 itemAction=(action itemAction item)}}
 {{/each}} COMPONENTS/ITEM-LIST
148. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
149. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button>
 <button onclick={{action itemAction “destroy”}}>
 Destroy
 </button> COMPONENTS/ITEM-DETAIL
150. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button>
 <button onclick={{action itemAction “destroy”}}>
 Destroy
 </button> COMPONENTS/ITEM-DETAIL
151. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
152. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button> CURRYING {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 itemAction=(action itemAction item)}}
 {{/each}}
153. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button> CURRYING {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 itemAction=(action itemAction item)}}
 {{/each}} {{action itemAction item “save”}}
154. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “destroy”}}>
 Destroy
 </button> CURRYING {{! templates/components/item-list.hbs
 {{#each items as |item|}}
 {{item-detail
 item=item
 itemAction=(action itemAction item)}}
 {{/each}} {{action itemAction item “destroy”}}
155. {{item-list itemAction=(action “doAction”)}} {{item-detail itemAction=(action itemAction item)}} <button onclick={{action itemAction “save”}}>
 <button onclick={{action itemAction “destroy”}}> items components/item-list components/item-detail CURRYING
156. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button> CURRYING // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } {{action itemAction item “save”}}
157. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “save”}}>
 Save
 </button> CURRYING // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action](); // item.save();
 }
 } {{action itemAction item “save”}}
158. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “destroy”}}>
 Save
 </button> CURRYING // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action]();
 }
 } {{action itemAction item “destroy”}}
159. {{! templates/components/item-detail.hbs
 <button onclick={{action itemAction “destroy”}}>
 Save
 </button> CURRYING // controllers/items.js
 actions: {
 doAction(item, action) {
 item[action](); // item.destroy();
 }
 } {{action itemAction item “destroy”}}
160. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
161. RETURN VALUES {{login-form login=“login”}} login components/login-form user <button {{action=“submit”}}>
162. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
163. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
164. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }} {{login-form login=“login”}} LOGIN
165. // controllers/login.js
 actions: {
 login(username, password, setUser) {
 let user = this._login(username, password); setUser(user);
 }
 } {{! templates/login.hbs }} {{login-form login=“login”}} LOGIN
166. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=“login”}} LOGIN
167. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=“login”}} LOGIN
168. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=“login”}} LOGIN
169. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=(action “login”)}} LOGIN
170. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
171. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
172. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button {{action “submit”}}>Login</button>
 {{/if}} COMPONENTS/LOGIN-FORM
173. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button onclick={{action “submit”}}>
 Login
 </button>
 {{/if}} COMPONENTS/LOGIN-FORM
174. // components/login-form.js
 actions: {
 submit() {
 let setUser = user => set(this, ‘user’, user);
 this.sendAction(‘login’, 
 get(this, ‘username’),
 get(this, ‘password’),
 setUser);
 }
 } COMPONENTS/LOGIN-FORM
175. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
176. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
177. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button onclick={{action “submit”}}>
 Login
 </button>
 {{/if}} COMPONENTS/LOGIN-FORM
178. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
179. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
180. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
181. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
182. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
183. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=(action “login”)}} LOGIN
184. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=(action “login”)}} LOGIN
185. // controllers/login.js
 actions: {
 login(username, password) {
 return this._login(username, password);
 }
 } {{! templates/login.hbs }} {{login-form login=(action “login”)}} LOGIN
186. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
187. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
188. {{login-form login=(action “login”)}} login components/login-form RETURN VALUES user <button onclick={{action “submit”}}>
189. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
190. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
191. // components/login-form.js
 actions: {
 submit() {
 let user = get(this, ‘login’)( 
 get(this, ‘username’),
 get(this, ‘password’)
 );
 set(this, ‘user’, user);
 }
 } COMPONENTS/LOGIN-FORM
192. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button onclick={{action “submit”}}>
 Login
 </button>
 {{/if}} COMPONENTS/LOGIN-FORM
193. {{! templates/components/login-form.hbs }}
 {{#if user}}
 You have been successfully logged in as: 
 {{user.username}}
 {{else}}
 {{input value=username}}
 {{input value=password}}
 
 <button onclick={{action “submit”}}>
 Login
 </button>
 {{/if}} COMPONENTS/LOGIN-FORM
194. RETURN VALUES {{login-form login=“login”}} login components/login-form user <button {{action=“submit”}}>
195. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
196. <input oninput={{action “updateValue”}} /> FIRST ARGUMENT VALUE
197. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue() {
 
 }
 } FIRST ARGUMENT VALUE
198. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue() {
 
 }
 } FIRST ARGUMENT VALUE
199. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue() {
 
 }
 } FIRST ARGUMENT VALUE event attribute on element
200. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue(event) {
 
 }
 } FIRST ARGUMENT VALUE
201. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
202. CAN WE MAKE THIS NICER?
203. <input oninput={{action “updateValue”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
204. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
205. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
206. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
207. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE gets value from given path on first argument
208. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(event) {
 set(this, ‘value’, event.target.value);
 }
 } FIRST ARGUMENT VALUE
209. <input oninput={{action “updateValue” 
 value=“target.value”}} />
 actions: {
 updateValue(value) {
 set(this, ‘value’, value);
 }
 } FIRST ARGUMENT VALUE
210. <input oninput={{action “updateValue” 
 value=“target.value”}} /> FIRST ARGUMENT VALUE
211. <input oninput={{action “updateValue” 
 value=“target.value”}} /> FIRST ARGUMENT VALUE
212. <input oninput={{action updateValue 
 value=“target.value”}} /> FIRST ARGUMENT VALUE
213. {{! templates/components/my-input.hbs }}
 <input oninput={{action updateValue 
 value=“target.value”}} /> FIRST ARGUMENT VALUE
214. {{! templates/components/my-input.hbs }}
 <input value={{value}}
 oninput={{action updateValue 
 value=“target.value”}} /> FIRST ARGUMENT VALUE
215. FIRST ARGUMENT VALUE {{my-input 
 value=value
 updateValue=(action “updateValue”)
 }}
216. FIRST ARGUMENT VALUE {{my-input 
 value=value
 updateValue=(action “updateValue”)
 }} actions: {
 updateValue(value) {
 set(this, ‘value’, value);
 }
 }
217. CLOSURE ACTIONS ACTION PASSING CURRYING RETURN VALUES FIRST ARGUMENT VALUE OVERRIDING FUNCTIONS
218. // components/my-input.js
 input(value) {
 get(this, ‘update’)(value);
 } OVERRIDING FUNCTIONS
219. // components/my-input.js
 input(value) {
 get(this, ‘update’)(value);
 } OVERRIDING FUNCTIONS <script>eval(‘alert(“1337 HAXX”);’)</script>
220. // components/my-input.js
 input(value) {
 get(this, ‘update’)(value);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS
221. // components/my-input.js
 input(value) {
 let sanitized = this.sanitize(value);
 get(this, ‘update’)(sanitized);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS
222. // components/my-input.js
 input(value) {
 let sanitized = this.sanitize(value);
 get(this, ‘update’)(sanitized);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS
223. // components/my-sanitizing-input.js
 export default MyInput.extend({
 sanitize(input) {
 return escapeEvilHTML(input);
 }
 }); OVERRIDING FUNCTIONS
224. // components/my-sanitizing-input.js
 export default MyInput.extend({
 sanitize(input) {
 return escapeEvilHTML(input);
 }
 }); OVERRIDING FUNCTIONS
225. // components/my-sanitizing-input.js
 export default MyInput.extend({
 sanitize(input) {
 return escapeEvilHTML(input);
 }
 }); OVERRIDING FUNCTIONS
226. // components/my-sanitizing-input.js
 export default MyInput.extend({
 sanitize(input) {
 return escapeEvilHTML(input);
 }
 }); OVERRIDING FUNCTIONS
227. // components/my-input.js
 input(value) {
 let sanitized = this.sanitize(value);
 get(this, ‘update’)(sanitized);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS
228. // components/my-input.js
 input(value) {
 let sanitized = this.sanitize(value);
 get(this, ‘update’)(sanitized);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS
229. // components/my-input.js
 input(value) {
 let sanitized = this.sanitize(value);
 get(this, ‘update’)(sanitized);
 } sanitize(input) {
 return input;
 } OVERRIDING FUNCTIONS an attribute
230. {{my-input
 update=(action “update”)
 sanitize=(action “myCustomSanitize”)
 }} OVERRIDING FUNCTIONS
231. {{my-input
 update=(action “update”)
 sanitize=(action “myCustomSanitize”)
 }} OVERRIDING FUNCTIONS
232. TROLLING OPPORTUNITY
233. // What will happen?
 actions: {
 alert() {
 alert(‘1337 HAXX0R’);
 }
 }
 
 {{my-component init=(action “alert”)}} OVERRIDING FUNCTIONS
234. // This will happen!
 Assertion Failed: 
 You must call `this._super` when implementing `init` in a component. OVERRIDING FUNCTIONS
235. OVERRIDING FUNCTIONS
236. CLOSURE ACTIONS AWESOME ADDONS THAT IMPROVE ON
237. EMBER-INVOKE-ACTION
238. EMBER-INVOKE-ACTION Abstracts away some ceremony around calling closure actions Backwards compatible with classic actions
239. sendAction send EMBER-INVOKE-ACTION
240. sendAction send EMBER-INVOKE-ACTION
241. sendAction send EMBER-INVOKE-ACTION invokeAction invoke
242. EMBER-ROUTE-ACTION-HELPER
243. EMBER-ROUTE-ACTION-HELPER Call actions on your route as closure actions Another reason to forget about controllers
244. saveModel=(route-action “save”) EMBER-ROUTE-ACTION-HELPER
245. EMBER-COMPOSABLE-HELPERS
246. <button {{action (pipe 
 addToCart 
 purchase 
 goToThankYouPage) 
 item}}
 >
 1-Click Buy
 </button> EMBER-COMPOSABLE-ACTIONS
247. <button {{action (pipe 
 addToCart 
 purchase 
 goToThankYouPage) 
 item}}
 >
 1-Click Buy
 </button> EMBER-COMPOSABLE-ACTIONS
248. <button {{action (pipe 
 addToCart 
 purchase 
 goToThankYouPage) 
 item}}
 >
 1-Click Buy
 </button> EMBER-COMPOSABLE-ACTIONS
249. <button {{action (pipe 
 addToCart 
 purchase 
 goToThankYouPage) 
 item}}
 >
 1-Click Buy
 </button> EMBER-COMPOSABLE-ACTIONS
250. <button {{action (pipe 
 addToCart 
 purchase 
 goToThankYouPage) 
 item}}
 >
 1-Click Buy
 </button> EMBER-COMPOSABLE-ACTIONS
251. The square of 4 is 
 {{compute (action "square") 4}} EMBER-COMPOSABLE-ACTIONS