Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexspeller/db9e34b00a9300425f008a0eba88a5d8 to your computer and use it in GitHub Desktop.
Save alexspeller/db9e34b00a9300425f008a0eba88a5d8 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
const {computed} = Ember;
let aCount = 0;
let bCount = 0;
let stableComputedKey = 0;
function stableComputed(...dependentKeys) {
let func = dependentKeys.pop();
let installed = false;
let oldValues = [];
let uniqueKey = `stableComputed-${stableComputedKey}`;
if (dependentKeys.any(k => k.includes('@') || k.includes('[]'))) {
throw new Error("Does not support array dependent keys");
}
stableComputedKey += 1;
return computed(uniqueKey, function(...compArgs) {
if (!installed) {
this.addObserver(...dependentKeys, function() {
let newValues = dependentKeys.map(k => this.get(k));
if (!newValues.every((value, i) => oldValues[i] === value)) {
this.notifyPropertyChange(uniqueKey);
}
oldValues = newValues;
});
installed = true;
oldValues = dependentKeys.map(k => this.get(k));
}
return func.apply(this, compArgs);
});
}
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
value: 'initial',
neverChangingProperty: computed('value', function() {
return 'always the same';
}),
a: stableComputed('neverChangingProperty', function() {
this.get('neverChangingProperty');
aCount += 1;
return aCount;
}),
b: computed('value', function() {
bCount += 1;
return bCount;
}),
actions: {
updateValue() {
this.set('value', Math.random())
},
updateNeverChanging() {
this.set('neverChangingProperty', Math.random())
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
a: {{a}}
<br>
b: {{b}}
<br>
value: {{value}}
<button {{action 'updateValue'}}>Update value</button>
<button {{action 'updateNeverChanging'}}>Change never changing</button>
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-data": "3.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment