computed-properties.js

/****
  Problem:

  You are making some edits, and in one of the computed properties you make
  the correct change to the function body, but forget to update the dependent keys.
  You test the change (the basic case only), and it works great. However, the function now
  has a bug that will need to be caught by QA or it will slip through to production.

  Solution:
  
  It should be possible to wrap our Ember computed properties to catch these errors.
  Below are some ideas/brainstorming.
  
  Relevant links:
  
  https://github.com/emberjs/rfcs/pull/11
  https://github.com/rwjblue/ember-new-computed
  https://github.com/jayphelps/ember-computed-smart-property
  https://github.com/gunn/ember-auto
  
  https://github.com/rwjblue/ember-computed-decorators
****/

import Ember from 'ember';

var Person = Ember.Object.extend({

  // Currenty way, using prototype extensions
  fullNameOld1: function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }.property('firstName', 'lastName')

  // Current way, no prototype extensions
  fullNameOld2: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  },

  // Idea 1
  fullName1: computed('firstName', 'lastName', function(firstName, lastName) {
    return `${firstName} ${lastName}`;
  },

  // Idea 2, with both getter & setter
  // See also:
  //   https://github.com/emberjs/rfcs/pull/11
  //   https://github.com/rwjblue/ember-new-computed
  // The shorthand syntax of computed(keyName1, keyName2, fn) should still be available for getters
  fullName2: computed('firstName', 'lastName', {
    get: function(firstName, lastName) {
      return `${firstName} ${lastName}`;
    },
    set: function(newValue, firstName, lastName) {
      var [newFirstName, newLastName] = newValue.split(' ');

      this.set('firstName', newFirstName);
      this.set('lastName', newLastName);
    }
  },
  
  // using ES7 decorators
  @computed('firstName', 'lastName')
  fullName: {
    get(firstName, lastName) {
      return `${firstName} ${lastName}`;
    },
    set(value, firstName, lastName) {
      var [newFirstName, newLastName] = newValue.split(' ');
      
      this.set('firstName', newFirstName);
      this.set('lastName', newLastName);
    }
  }
});