ember.js - 在 ember 中过滤商店数据

Question

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

要么 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>

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

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

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

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

编辑:

尝试 #4 - 使用 RSVP 哈希的 findAll:

路线

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 的调用都可以绑定(bind)，但 txSites 不能。

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

尝试#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 似乎是一个 promise ，而不是已解决 promise 的结果。

Answer 1

您应该在“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'; 
                 });
    });
}

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