15 Things You Shouldn't Do In Ember Anymore

Transcript

1. 15 Things You shouldn’t be doing in Ember.js anymore
2. Kerrick Long Things I make and do Where to find me online twitter.com/KerrickLong github.com/Kerrick Lead Front-end Developer at Second Street KerrickLong.com www. meetup.com/ STLEmber
3. Not using Ember CLI
4. npm install -g ember-cli ember new my-project
5. Using needs in Controllers
6. import Ember from 'ember';
 
 export default Ember.Controller.extend({
 needs: ['pages'],
 title: 'controllers.pages.model.title'
 });
 Using needs in Controllers
7. import Ember from 'ember';
 
 export default Ember.Controller.extend({
 pages: Ember.inject.controller(),
 title: 'pages.model.title'
 }); Using inject in Controllers
8. import Ember from 'ember';
 
 export default Ember.Controller.extend({
 foo: Ember.inject.controller('pages'),
 title: 'foo.model.title'
 });
 Using inject in Controllers
9. Computed properties with getter / setter in one function
10. import Ember from 'ember';
 
 export default Em.Service.extend({
 minutes: 480,
 hours: Em.computed('minutes', function(k, v) {
 if (arguments.length > 1) {
 this.set('minutes', v * 60);
 }
 
 return this.get('minutes') / 60;
 })
 }); Computed getter / setter
11. Computed getter / setter import Ember from 'ember';
 
 export default Em.Service.extend({
 minutes: 480,
 hours: Em.computed('minutes', {
 get() {
 return this.get('minutes') / 60;
 },
 set(k, v) {
 return this.set('minutes', v * 60);
 }
 })
 });
12. Using this.resource in the router
13. Using this.resource Router.map(function() {
 this.resource('pages', function() {
 this.resource('comments');
 });
 }); // app/routes/comments/index.js
 export default Ember.Route.extend({
 model() {
 return this.store.find('comments');
 }
 });
14. Using this.resource Router.map(function() {
 this.route('pages', function() {
 this.route('comments');
 });
 });
 // app/routes/pages/comments/index.js
 export default Ember.Route.extend({
 model() {
 return this.store.find('comments');
 }
 });
15. Using {{bind- attr}}
16. Using {{bind-attr}} <button {{bind-attr title=buttonTitle}}>
 Submit!
 </button>
17. Using {{bind-attr}} <button title={{buttonTitle}}>
 Submit!
 </button>
18. {{#each}} without as
19. {{#each}} with in <ul>
 {{#each messages}}
 <li>{{text}}</li>
 {{/each}}
 </ul>
20. {{#each}} with in <ul>
 {{#each message in messages}}
 <li>{{message.text}}</li>
 {{/each}}
 </ul>
 

21. {{#each}} with in <ul>
 {{#each messages as |message|}}
 <li>{{message.text}}</li>
 {{/each}}
 </ul>
22. Using the {{render}} helper
23. The {{render}} helper <div>
 {{render "my-controller" model}}
 </div>
24. The {{render}} helper <div>
 {{my-component thing=model}}
 </div>
25. Using the {{view}} helper
26. ember g component new-way
27. Using Ember.Select
28. Using {{view "select"}} {{view "select"
 content=model.pages
 optionValuePath="content.id"
 optionLabelPath="content.title"
 prompt="-- Select One --"
 }}
29. Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select
30. Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select Or use a legacy addon.
31. Creating arrayComputed properties
32. Using arrayComputed import Ember from 'ember';
 
 export default Ember.Controller.extend({
 uniqueChildren: Ember.arrayComputed('model.@each.children.[]', {
 addedItem: function(accumulatedValue, model) {
 accumulatedValue.addObjects(model.get('children'));
 return accumulatedValue.uniq();
 },
 removedItem: function(accumulatedValue, model) {
 accumulatedValue.removeObjects(model.get('children'));
 return accumulatedValue.uniq();
 }
 })
 });
33. Using arrayComputed import Ember from 'ember';
 
 export default Ember.Controller.extend({
 uniqueChildren: Ember.computed('model.@each.children.[]', function() {
 return _.flatten(this.get('model').map(x => x.get('children'))).uniq();
 })
 });
34. Creating reduceComputed properties
35. Using reduceComputed import Ember from 'ember';
 
 export default Ember.Controller.extend({
 total: Ember.reduceComputed('model.@each.value', {
 initialValue: 0,
 addedItem(accumulatedValue, item) {
 return accumulatedValue + item.get('value');
 },
 removedItem(accumulatedValue, item) {
 return accumulatedValue - item.get('value');
 }
 })
 });
36. Using reduceComputed import Ember from 'ember';
 
 export default Ember.Controller.extend({
 total: Ember.computed('model.@each.value', function() {
 const addValues = (p, x) => p + x.get('value');
 return this.get('model').reduce(addValues, 0);
 })
 });
37. Using ObjectController
38. Using ObjectController import Ember from 'ember';
 
 export default Ember.ObjectController.extend({
 foo: Ember.computed.not('bar')
 });
39. Using ObjectController import Ember from 'ember';
 
 export default Ember.Controller.extend({
 foo: Ember.computed.not('model.bar')
 });
40. Using ArrayController
41. Using ArrayController import Ember from 'ember';
 
 export default Ember.ArrayController.extend({
 sortProperties: ['date', 'name']
 // You can use `arrangedContent`
 });
42. Using ArrayController import Ember from 'ember';
 
 export default Ember.Controller.extend({
 arrangedContent: Ember.computed.sort(/**/)
 });
43. Using {{#each}} with itemController
44. ember g component new-way
45. Mutating data in components
46. Parent Child data manipulation manipulation source of data
47. Parent Child data manipulation source of data
48. Parent Child data manipulation actions regarding user input or intent source of data
49. Thank you.