ember.js 正在筛选成员中的存储数据

kh212irz  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(150)

我试图过滤一些硬编码的数据在一个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>

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 /站点对象{数据:数组[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 /站点?站点类型=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';
            })
        });
    }
});

结果

oneThinganotherThing的调用都绑定成功,但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似乎是一个承诺,而不是已解析承诺的结果。

6fe3ivhb

6fe3ivhb1#

您应该在'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中,您还应使用 Jmeter 化值,因此使用'site-type'而不是siteType。

qf9go6mv

qf9go6mv2#

您没有从模型函数正确返回数据。请按以下方式操作。

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,在那里所有来自模型钩子的承诺都将被解析。

相关问题