lundi 6 juin 2016

Filtering store data in ember

I am trying to filter some hard coded data in an Ember route which is being provided by mirage and having trouble.

Either Ember moans at my syntax (when trying to use filter on the store) or it doesn't return any data when I use findAll and then use the JS filter method on the objects.

Attempt 1 - Using findAll():

Route

export default Ember.Route.extend({
    model() {
        return {
            txSites: this.get('store').findAll('site').filter((site) => {
                return site.siteType === 'tx'; 
            })
        };
    }
}); 

Template

            <select class="form-control">
                
                    <option value=""></option>
                
            </select>

Mirage endpoint

this.get('/sites', () => {    

 return {
     data: [{
         type: 'site',
         id: 1,
         attributes: {
             name: 'London',
             siteType: 'tx'
         }
     },
     {
         type: 'site',
         id: 2,
         attributes: {
             name: 'Bristol',
             siteType: 'rx'                 
         }
     }]
  }      
});

Result

Successful request: GET /sites Object {data: Array[2]}

But nothing bound to the dropdown (other calls where I'm not trying to filter the results work ok).

Attempt #2 : Using filter:

export default Ember.Route.extend({
    model() {
        return {
            txSites: this.get('store').filter('site', (site) => {
                return site.siteType === 'tx'; 
            })
        };
    }
});

Result

No call made to API

Attempt #3 : using filter

export default Ember.Route.extend({
    model() {
        return {
            txSites: this.get('store').filter('site', { siteType: 'tx' }, (site) => {
                return site.siteType === 'tx'; 
            }).then((results) => { return results })
        };
    }
});

Result

Successful request: GET /sites?siteType=tx Object {data: Array[2]}

But no data bound to the select item.

It feels like I'm missing something basic here. Using ember 2.5 and ember data 1.13.

Is there a recommended way to approach this?




Aucun commentaire:

Enregistrer un commentaire