Skip to content

Instantly share code, notes, and snippets.

@ilucin
Last active July 12, 2016 15:41
Show Gist options
  • Select an option

  • Save ilucin/b62bcd363507c63952f2a8c5072559b2 to your computer and use it in GitHub Desktop.

Select an option

Save ilucin/b62bcd363507c63952f2a8c5072559b2 to your computer and use it in GitHub Desktop.
Observer on hasMany
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";
export default Model.extend({
title: attr('string')
});
import Ember from 'ember';
import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";
export default Model.extend({
name: attr('string'),
tasks: hasMany('task'),
otherTasks: Ember.computed(() => [])
});
export default Ember.Route.extend({
model() {
const tasks = [];
for (let i = 0; i < 20; i++) {
tasks.push(this.store.createRecord('task', { title: `Task ${i}` }));
}
const user = this.store.createRecord('user', {name: 'John' });
return {user, tasks};
},
setupController(ctrl, model) {
this._super(...arguments);
ctrl.set('counter1', 0);
ctrl.set('counter2', 0);
ctrl.set('counter3', 0);
ctrl.set('counter4', 0);
ctrl.set('counter5', 0);
model.user.addObserver('tasks', () => { ctrl.set('counter1', ctrl.get('counter1') + 1) });
model.user.addObserver('tasks.[]', () => { ctrl.set('counter2', ctrl.get('counter2') + 1) });
model.user.addObserver('otherTasks', () => { ctrl.set('counter3', ctrl.get('counter3') + 1)});
model.user.get('tasks').addArrayObserver(this, {
willChange: () => ctrl.set('counter4', ctrl.get('counter4') + 1),
didChange: () => ctrl.set('counter5', ctrl.get('counter5') + 1)
});
},
actions: {
setMoreTasks(user, tasks) {
user.set('tasks', tasks.slice(0, user.get('tasks').toArray().length + 1));
user.set('otherTasks', tasks.slice(0, user.get('otherTasks.length') + 1));
}
}
});
<h1>Observers on model hasMany</h1>
<button {{action 'setMoreTasks' model.user model.tasks}}> Set more tasks </button>
<br>
<br>
User: {{model.user.name}}
<br>
Tasks: {{#each model.user.tasks as |task|}} {{task.title}} {{else}} / {{/each}}
<br>
Other tasks: {{#each model.user.otherTasks as |task|}} {{task.title}} {{else}} / {{/each}}
<br>
<br>
addObserver('tasks') called {{counter1}} times
<br>
addObserver('tasks.[]') called {{counter2}} times
<br>
addObserver('otherTasks') called {{counter3}} times
<br>
addArrayObserver.willChange called {{counter4}} times
<br>
addArrayObserver.didChange called {{counter5}} times
{
"version": "0.10.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.6.0",
"ember-data": "2.6.1",
"ember-template-compiler": "2.6.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment