Skip to content

Instantly share code, notes, and snippets.

@Kilowhisky
Last active March 27, 2018 00:05
Show Gist options
  • Save Kilowhisky/099d510ed467e1621975 to your computer and use it in GitHub Desktop.
Save Kilowhisky/099d510ed467e1621975 to your computer and use it in GitHub Desktop.
ArrayWillChange LiveRecordArray Issue
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
shouldBackgroundReloadRecord(store, snapshot){
return false;
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export default Ember.Route.extend({
init: function(){
this._super(...arguments);
$.mockjax({
url: '/fields',
responseText: [
{ id: 1, name: 'how', posts: [1] },
{ id: 2, name: 'now', posts: [2,4] },
{ id: 3, name: 'cow', posts: [3] }
]
});
$.mockjax({
url: '/posts',
responseText: [
{ id: 1, name: 'how', utc: '2015-05-12T00:00:00' },
{ id: 2, name: 'now', utc: '2015-05-12T00:05:00' },
{ id: 3, name: 'brown', field: 3, utc: '2015-05-12T00:02:00' },
{ id: 4, name: 'cow', utc: '2015-05-12T00:10:00' },
{ id: 6, name: 'six', utc: '2015-05-12T00:35:00' }
]
});
$.mockjax({
url: '/posts/2',
responseText: { id: 2, name: 'now', utc: '2015-05-12T00:05:00' }
});
$.mockjax({
url: '/posts/6',
responseText: { id: 6, name: 'six', utc: '2015-05-12T00:35:00' }
});
},
afterModel: function(model){
this.store.findAll('post');
model.post.addArrayObserver(this, {
willChange: 'dependentArrayWillChange',
didChange: 'dependentArrayDidChange'
});
},
model: function(){
return Ember.RSVP.hash({
field: this.store.findAll('field'),
post: this.store.peekAll('post')
});
},
dependentArrayWillChange(observedArray, start, removeCount /*, addCount */ ){
if(removeCount > 0){
let removedSlice = observedArray.slice(start, start + removeCount);
console.log(start, removeCount, observedArray.get('length'));
console.log(observedArray.toArray());
console.log(removedSlice);
alert('object removed is ' + removedSlice);
}
},
dependentArrayDidChange(observedArray, start, removeCount, addCount){
},
actions: {
unload(){
[2,6].forEach(x => {
let record = this.store.peekRecord('post', x);
if(record){
this.store.unloadRecord(record);
}
});
},
load(type, id){
this.store.findRecord(type, id);
}
}
});
<p>This twiddle shows the issues with unloading record from the store and attempting to watch the record array as this is being performed. To see the issue doe the following.</p>
<ol>
<li>click the 'unload' button</li>
<li>View in console the record array state that is printed to screen as records are unloaded</li>
</ol>
<p>
NOTE: on ember data #5273 the record array will contain null entries indefinitely and immediately, on ember data #5273 this only happens after the first time the willchange method is called.</p>
<h3>posts</h3>
{{#each model.post as |post|}}
<div>Id: {{post.id}}, Name: {{post.name}}, UTC: {{post.utc}}</div>
{{/each}}
<button {{action 'unload'}}>Unload Id: 2,6</button>
<button {{action 'load' 'post' 2}}>Load Id: 2</button>
<button {{action 'load' 'post' 6}}>Load Id: 6</button>
import DS from 'ember-data';
import Ember from 'ember';
export default DS.Model.extend({
name: DS.attr('string'),
posts: DS.hasMany('post', {async: false }),
postsSorted: Ember.computed.sort('posts','postsSortedBy'),
postsSortedBy: ['utc:asc']
});
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
utc: DS.attr('date'),
field: DS.belongsTo('post', {async: true})
});
import DS from 'ember-data';
export default DS.JSONSerializer.extend({});
{
"version": "0.4.16",
"EmberENV": {
"FEATURES": {}
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.16.2",
"ember-data": "2.18.1",
"ember-template-compiler": "2.16.2",
"jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment