Skip to content

Instantly share code, notes, and snippets.

@machty
Last active October 23, 2017 07:01
Show Gist options
  • Save machty/9b614a00efd1d5ec7738f35c98f7ae0e to your computer and use it in GitHub Desktop.
Save machty/9b614a00efd1d5ec7738f35c98f7ae0e to your computer and use it in GitHub Desktop.
New Twiddle
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;
}
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment