15 Things You Shouldn't Do In Ember Anymore

15 Things You Shouldn't Do In Ember Anymore

2956e2cd2664630aa968b92bbb645f2f?s=128

Kerrick Long

August 03, 2015
Tweet

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.