dimanche 14 février 2016

Filtering Results in Ember 2.2 with PouchDB Adapter

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