15 Things You Shouldn't Do In Ember Anymore

Transcript

1. 1.

   15 Things You shouldn’t be doing in Ember.js anymore

2. 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. 3.

   Not using Ember CLI

4. 4.

   npm install -g ember-cli ember new my-project

5. 5.

   Using needs in Controllers

6. 6.

   import Ember from 'ember';
 
 export default Ember.Controller.extend({
 needs: ['pages'],


   title: 'controllers.pages.model.title'
 });
 Using needs in Controllers
7. 7.

   import Ember from 'ember';
 
 export default Ember.Controller.extend({
 pages: Ember.inject.controller(),


   title: 'pages.model.title'
 }); Using inject in Controllers
8. 8.

   import Ember from 'ember';
 
 export default Ember.Controller.extend({
 foo: Ember.inject.controller('pages'),


   title: 'foo.model.title'
 });
 Using inject in Controllers
9. 9.

   Computed properties with getter / setter in one function

10. 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. 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. 12.

    Using this.resource in the router

13. 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. 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. 15.

    Using {{bind- attr}}

16. 16.

    Using {{bind-attr}} <button {{bind-attr title=buttonTitle}}>
 Submit!
 </button>

17. 17.

    Using {{bind-attr}} <button title={{buttonTitle}}>
 Submit!
 </button>

18. 18.

    {{#each}} without as

19. 19.

    {{#each}} with in <ul>
 {{#each messages}}
 <li>{{text}}</li>
 {{/each}}
 </ul>

20. 20.

    {{#each}} with in <ul>
 {{#each message in messages}}
 <li>{{message.text}}</li>
 {{/each}}


    </ul>
 

21. 21.

    {{#each}} with in <ul>
 {{#each messages as |message|}}
 <li>{{message.text}}</li>
 {{/each}}


    </ul>
22. 22.

    Using the {{render}} helper

23. 23.

    The {{render}} helper <div>
 {{render "my-controller" model}}
 </div>

24. 24.

    The {{render}} helper <div>
 {{my-component thing=model}}
 </div>

25. 25.

    Using the {{view}} helper

26. 26.

    ember g component new-way

27. 27.

    Using Ember.Select

28. 28.

    Using {{view "select"}} {{view "select"
 content=model.pages
 optionValuePath="content.id"
 optionLabelPath="content.title"
 prompt="-- Select

    One --"
 }}
29. 29.

    Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select

30. 30.

    Using {{view "select"}} “Make your own.” http://emberjs.com/deprecations/v1.x/#toc_ember-select Or use a

    legacy addon.
31. 31.

    Creating arrayComputed properties

32. 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. 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. 34.

    Creating reduceComputed properties

35. 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. 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. 37.

    Using ObjectController

38. 38.

    Using ObjectController import Ember from 'ember';
 
 export default Ember.ObjectController.extend({


    foo: Ember.computed.not('bar')
 });
39. 39.

    Using ObjectController import Ember from 'ember';
 
 export default Ember.Controller.extend({


    foo: Ember.computed.not('model.bar')
 });
40. 40.

    Using ArrayController

41. 41.

    Using ArrayController import Ember from 'ember';
 
 export default Ember.ArrayController.extend({


    sortProperties: ['date', 'name']
 // You can use `arrangedContent`
 });
42. 42.

    Using ArrayController import Ember from 'ember';
 
 export default Ember.Controller.extend({


    arrangedContent: Ember.computed.sort(/**/)
 });
43. 43.

    Using {{#each}} with itemController

44. 44.

    ember g component new-way

45. 45.

    Mutating data in components

46. 46.

    Parent Child data manipulation manipulation source of data

47. 47.

    Parent Child data manipulation source of data

48. 48.

    Parent Child data manipulation actions regarding user input or intent

    source of data
49. 49.

    Thank you.