EL - CPM

controllers.application.js

import Ember from 'ember';

// A computed property macro!
function fullName(firstNameKey, lastNameKey) {
  return Ember.computed(firstNameKey, lastNameKey, {
    get() {
      return `${this.get(firstNameKey)} ${this.get(lastNameKey)}`;
    },
    set(key, newVal) {
      let parts = newVal.split(' ');
      this.set(firstNameKey, parts[0] || '');
      this.set(lastNameKey, parts[1] || '');
      return newVal;
    }
  });
};

export default Ember.Controller.extend({
  firstName: 'Mike',
  lastName: 'North',
  name: fullName('firstName', 'lastName'),
  reverseName: fullName('lastName', 'firstName')
});

templates.application.hbs

<h1>A demonstration of a simple computed property macro</h1>

<p>
<label>First Name</label>
<input
	value={{firstName}}
  onInput={{action (mut firstName) value='target.value'}} />
</p>

<p>
<label>Last Name</label>
<input
	value={{lastName}}
  onInput={{action (mut lastName) value='target.value'}} />
</p>

<hr>
<p>
<label>Name</label>
<input
	value={{name}}
  onInput={{action (mut name) value='target.value'}} />
</p>

<p>
<label>Name</label>
<input
	value={{reverseName}}
  onInput={{action (mut reverseName) value='target.value'}} />
</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}