Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactive Component
import Ember from 'ember';
const { computed } = Ember.Object;
import { task, timeout } from 'ember-concurrency';
// import watchedAttrs from '../mixins/watch-attrs';
export default Ember.Component.extend(watchedAttrs, {
watchedAttrs: computed(() => [
'page',
'limit',
'filter'
]),
didReceiveAttrs () {
let changedAttrs = this.getChangedAttrs();
if (changedAttrs.get('length') > 0) {
this.get('refreshData').perform();
}
},
refreshData: task(function * () {
this.set('data', []);
yield timeout(200);
this.set('data', ['a', 'list', 'of', 'things']);
}),
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams: [
'page',
'limit',
'filter'
],
page: 1,
limit: 10,
filter: ''
});
import { compare } from '@ember/utils';
import { computed } from '@ember/object';
import Mixin from '@ember/object/mixin';
const getOldAttrKey = str => `_old${str}`;
export default Mixin.create({
watchedAttrs: computed(() => []),
getCommon(arr1, arr2) {
return arr1.filter(item => arr2.includes(item));
},
getChangedAttrs () {
let watchedAttrs = this.watchedAttrs;
let changedAttrs = watchedAttrs.filter(attr => {
let oldKey = getOldAttrKey(attr);
let newVal = this.get(attr);
let oldVal = this.get(oldKey);
this.set(oldKey, newVal);
if (compare(newVal, oldVal) !== 0) {
return true
}
return false;
});
return changedAttrs;
},
});
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('my-route');
});
export default Router;
import Ember from 'ember';
export default Ember.Route.extend({
});
<h1>Welcome to {{appName}}</h1>
<br>
{{#link-to 'my-route'}}Visit Test Route{{/link-to}}
<br>
{{outlet}}
<br>
<br>
{{route-component
page=page
setPage=(action (mut page))
limit=limit
filter=filter
}}
{
"version": "0.13.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": "release",
"ember-template-compiler": "release",
"ember-testing": "release"
},
"addons": {
"ember-data": "release",
"ember-concurrency": "^0.8.10"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment