筛选 ember 中的商店数据

Question

我正在尝试过滤 Ember 路由中的一些硬编码数据，该路由由 mirage 提供，但遇到了问题。

要么 Ember 抱怨我的语法（当试图在商店中使用 filter 时），要么当我使用 findAll 时 return 没有任何数据并且然后在对象上使用 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>

Mirage 端点

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]}

但没有数据绑定到 select 项。

感觉好像缺少一些基本的东西。使用 ember 2.5 和 ember 数据 1.13.

是否有解决此问题的推荐方法？

编辑：

尝试 #4 - 使用 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 并且这很高兴 return 整个数据集并且绑定正常（所以我很高兴这是导致问题的过滤器并且绑定正常）。

尝试 #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'; 
                 }))
        });
    }
});

结果

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

Answer 1

您没有正确地从您的模型函数返回数据。这样做吧。

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，模型挂钩中的所有承诺都将得到解决。

Answer 2

您应该在 'findAll' promise 解析后进行过滤，如下所示：

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'; 
                 });
    });
}

同样在 mirage 中你应该使用破折号值，所以 'site-type' 而不是 siteType。

筛选 ember 中的商店数据

Filtering store data in ember

filter

ember.js

ember-data