EmberScreencasts 38 

ES2015: functions minus 'function'

"Classic" functions

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function() {
      var controller = this;
      this.get("model").save().then(function(){
        controller.transitionToRoute('<%= dasherizedModuleName %>.show')
      })
    }
  }
})

ES2015 functions

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      this.get("model").save().then(()=>{
        this.transitionToRoute('<%= dasherizedModuleName %>.show')
      })
    }
  }
})
//"Classic"

save: function(){}

//ES2015

save(){}

Method declaration

//"Classic"

save: function(arg1){}

//ES2015

save(arg1){}

Method declaration

//"Classic"

var controller = this;
this.save().then(function(){
  controller.doThing()
})

//ES2015

this.save().then(()=>{
  this.doThing()
})

Anonymous functions

//"Classic"
shouldWearHat: Ember.computed('wind', function(){
  return this.get('wind') > 3;
})

//ES2015
shouldWearHat: Ember.computed('wind', ()=>{
  return this.get('wind') > 3;
  //Oops! 'this' now refers to window
})

//ES2016 + ember-computed-decorators
@computed('wind')
shouldWearHat(){
  return this.get('wind') > 3;
}

Classic: still good for something

//"Classic"
shouldWearHat: Ember.computed('wind', function(){
  return this.get('wind') > 3;
})

//ES2015
shouldWearHat: Ember.computed('wind', ()=>{
  return this.get('wind') > 3;
  //Oops! 'this' now refers to window
})

//ES2016 (decorators)
@computed('wind')
shouldWearHat(){
  return this.get('wind') > 3;
}

//Yes, I know you can use Ember.computed.gt

Classic: still good for something

export default Ember.Controller.extend({
  actions: {
    save: function() {
      var controller = this;
      this.get("model").save().then(function(){
        controller.transitionToRoute('<%= dasherizedModuleName %>.show')
      })
    }
  }
})
export default Ember.Controller.extend({
  actions: {
    save() {
      this.get("model").save().then(()=>{
        this.transitionToRoute('<%= dasherizedModuleName %>.show')
      })
    }
  }
})

"Classic"

ES2015

Screencast 38- functions minus 'function'

By Jeffrey Biles

Made with Slides.com

Screencast 38- functions minus 'function'

  • 1,667

More from Jeffrey Biles