New Twiddle

controllers.application.js

import Ember from 'ember';


export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  firstName: 'Alex',
  lastName: 'Matchneer',
  
  fullName: auto(get => 
    `${get('firstName')} ${get('lastName')}`
  ),
  
  fullNameCaps: auto(get => get('fullName').toUpperCase()),
  
  // shorthand
  fullNameLowercase: auto(g => g('fullName').toLowerCase()),
  

  dynamicAlias: auto(g => g(g('aliasedProperty'))),
  aliasedProperty: 'fullNameCaps',
  
  // other possible use cases:
  // shorthand for initializing arrays/objects
  // that shouldn't be shared between instances
  // (note: JS class syntax has an initializer
  // syntax that would obselete this):
  maybeUnsafeProtoArray: [],
  instanceArray: auto(() => []),
  
  aliasedPropertyList: [
    'firstName', 'lastName', 'fullName',
    'fullNameCaps', 'fullNameLowercase',
  ],
  
  actions: {
    setAliasedProperty(prop) {
      this.set('aliasedProperty', prop);
    }
  }
});

function auto(fn) {
  let dependentKeys = [];
  let getAndTrack;
  let cp = new Ember.ComputedProperty(function(property) {
    dependentKeys.length = 0;
    if (!getAndTrack) {
      getAndTrack = (key, track = true) => {
        if (track && dependentKeys.indexOf(key) === -1) {
          dependentKeys.push(key);
        }
        return Ember.get(this, key);
      };
    }
    return fn.call(this, getAndTrack, property);
  }, { dependentKeys });
  return cp;
}

templates.application.hbs

<h2>"auto" computed property experiment</h2>

<p>
  "auto" is a way of declaring
  computed properties that automatically
  tracks dependencies. It accomplishes this
  by passing to your CP function a "get-and-track" function
  that you can use to fetch dependent values.
  This approach also allows you to define CPs with
  arrow functions (since with the get-and-track fn
  you don't access to `this`). If you want to
  opt out of tracking a dependent key, you
  can pass `false` as the second arg to the
  get-and-track fn.
</p>

<p>
  Kinda cool?
  If people like this i'll make an addon, but in the meantime
  you can experiment with the `auto` function, which
  is self-contained and should work on (I think) all
  versions of Ember.
</p>

<p>
  One shortcoming of this approach is that it doesn't
  handle array dependencies (which usually involve
  a depkey of '.length' or '.@each').
  In those cases, just use classic Ember.computed
</p>

{{input value=firstName}}
{{input value=lastName}}
<br>
{{fullName}}
{{fullNameCaps}}
{{fullNameLowercase}}

<h2>Dynamic Aliasing</h2>

<p>
  You can use this approach as a dynamic `computed.alias()`
  if you don't know the name of the aliased property up front.
</p>

<p>
  aliasedProperty: {{aliasedProperty}} <br>
  value: {{dynamicAlias}} <br>
  
  {{#each aliasedPropertyList as |p|}}
    <button onclick={{action 'setAliasedProperty' p}}>
      Point alias to {{p}}
    </button><br>
  {{/each}}
</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"
  }
}