Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
});
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
const { computed } = Ember;
export default Ember.Controller.extend({
everyFewSecondsTimer: task(function *() {
let i = 0;
while (true) {
this.set('i', ++i);
yield timeout(2500);
}
}).on('init'),
now: computed(function() {
return new Date();
}).volatile(),
volatileProperty: computed(function() {
return this.getProperties('i', 'now');
}).volatile(),
volatileDependency: computed('now', function() {
return this.getProperties('i', 'now');
}),
updatedEveryFewSeconds: computed('i', function() {
return this.getProperties('i', 'now');
}),
});
import Ember from 'ember';
export default Ember.Controller.extend({
});
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('stuff');
});
export default Router;
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
th,td { text-align: left; padding: 0.2em 1em; }
hr { margin: 1em 0 3em; }
nav { text-align: center; }
<h1>Volatile Example</h1>
<nav>
{{link-to 'Index' 'index'}} |
{{link-to 'Other Route' 'stuff'}}
</nav>
<hr>
{{outlet}}
<p>
This example shows what gets updated when using volatile and when depending on a volatile property.
As it turns out, using a volatile property as a dependency does nothing.
Try going to the {{link-to 'other route' 'stuff'}} and then coming back. Notice what happens to the "Volatile Property".
</p>
<table>
<tr>
<th>Name</th>
<th>Number</th>
<th>Time</th>
</tr>
<tr>
<td>Volatile Property</td>
<td>{{volatileProperty.i}}</td>
<td>{{volatileProperty.now}}</td>
</tr>
<tr>
<td>Volatile Dependency</td>
<td>{{volatileDependency.i}}</td>
<td>{{volatileDependency.now}}</td>
</tr>
<tr>
<td>Updated</td>
<td>{{updatedEveryFewSeconds.i}}</td>
<td>{{updatedEveryFewSeconds.now}}</td>
</tr>
</table>
Now, go back to the {{link-to 'index' 'index'}} to see what changes.
{
"version": "0.13.0",
"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.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-concurrency": "0.8.16"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.