在 ember 中过滤存储数据

Question

我正在尝试过滤由 Mirage 提供的 Ember 路由中的一些硬编码数据并且遇到问题。

Ember 抱怨我的语法（尝试在商店中使用 filter 时）或者当我使用 findAll 然后对对象使用 JS 过滤方法时它不返回任何数据。

尝试 1 - 使用 findAll()：

路线

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

模板

            <select class="form-control">
                {{#each model.txSites as |site|}}
                    <option value="{{site.id}}">{{site.name}}</option>
                {{/each}}
            </select>

幻影端点

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

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

结果

请求成功：GET /sites 对象{数据：数组[2]}

但没有绑定到下拉列表（我不尝试过滤结果的其他调用工作正常）。

尝试#2：使用filter：

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

结果

没有调用 API

尝试 #3：使用过滤器

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

结果

请求成功：GET /sites?siteType=tx 对象{数据：数组[2]}

但没有数据绑定到选择项。

感觉我在这里缺少一些基本的东西。使用 ember 2.5 和 ember data 1.13。

有没有推荐的方法来解决这个问题？

编辑：

尝试 #4 - findAll 与 RSVP 哈希：

路线

export default Ember.Route.extend({
    model() {
        return Ember.RSVP.hash({
            oneThing: this.store.findAll('oneThing'),
            anotherThing: this.store.findAll('anotherThing'),
            txSites: this.store.findAll('site').filter((site) => {
                console.log(site);
                return site.siteType === 'tx';
            })
        });
    }
});

结果

对oneThing 和anotherThing 的调用都可以绑定，但txSites 不行。

作为进一步的测试，我从txSites 属性中删除了.filter，这很高兴地返回了整个数据集并且绑定正常（所以我很高兴它是导致问题的过滤器并且绑定正常）。

尝试 #5

路线

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

结果

没有返回数据，控制台在过滤器中记录site 似乎是一个承诺，而不是已解决的承诺的结果。

Answer 1

您应该在“findAll”承诺解决后进行过滤，如下所示：

model() {
    return Ember.RSVP.hash({
        oneThing: this.store.findAll('oneThing'),
        anotherThing: this.store.findAll('anotherThing'),
        txSites: this.store.findAll('site')
                 .then(results => results.filter((site) => {
                    return site.get('siteType') === 'tx'; 
                 });
    });
}

同样在海市蜃楼中，您应该使用虚线化的值，所以使用 'site-type' 而不是 siteType。

Answer 2

你没有从你的模型函数中返回数据。这样做。

model(){
    return this.get('store').findAll('site').filter((site) => {
        return site.siteType === 'tx';
    });
}

然后在模板中作为：

{{#each model as |site|}}

更新：

我建议您改为查询商店：

this.store.query('site', { filter: { siteType: 'tx' } });

更新2：

你可以在afterModel钩子中过滤txSites，模型钩子的所有promise都会被解析。