Having a hard time understanding filtering in Ember 2.2. I have a list of items with an 'isArchived' attribute that is either true or false. I have two routes for active (true) and archived (false) that share the same component with some different text/buttons for each state.
<h2>{{slideshow.title}}</h2>
{{#if slideshow.isArchived}}
<p class="stats"><strong>Archived on</strong> {{slideshow.dateArchived}}</p>
<ul class="btn-list">
<li><a {{action 'restoreSlideshow' slideshow}}>Restore</a></li>
</ul>
{{else}}
<p class="stats"><strong>Created on</strong> {{slideshow.dateCreated}}</p>
<ul class="btn-list">
<li><a {{action 'archiveSlideshow' slideshow}}>Archive</a></li>
</ul>
{{/if}}
Component JS:
archiveSlideshow: function(slideshow) {
slideshow.set('isArchived', true);
slideshow.save();
},
restoreSlideshow: function(slideshow) {
slideshow.set('isArchived', false);
slideshow.save();
}
With this code the lists work as expected, clicking archive removes the item from the list and it appears in the other. But when I start ember server the list is blank? I do see the data in PouchDB inspector. If I create data it appears, but anything previously created before I killed/restarted does not appear.
model() {
return this.store.filter('slideshow', function(record) {
return record.get('isArchived') === false;
});
}
With this code the data does appear on start but is obviously not filtered:
model() {
return this.store.findAll('slideshow');
}
With this code I found in another post, when I click the archive button the text changes but it doesn't disappear from the list until I navigate away and back:
model() {
var self = this;
return new Ember.RSVP.Promise(function(resolve) {
self.store.findAll('slideshow').then(function(slideshows) {
resolve(slideshows.filterBy('isArchived', false));
});
});
}
Also found this method which does the same thing as the previous:
model() {
return this.store.findAll('slideshow').then(function(slideshows) {
return slideshows.filter(function(slideshow) {
return slideshow.get('isArchived') === false;
});
});
}
The model function for each route is the same with the only difference being === false or === true.
Any ideas on what I'm doing wrong?
Aucun commentaire:
Enregistrer un commentaire