在ember

时间:2016-06-06 12:59:03

标签: ember.js filter ember-data

我正在尝试过滤一些由海市蜃楼提供并遇到麻烦的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 / sites 对象{data:Array [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 对象{data:Array [2]}

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

感觉我在这里遗漏了一些基本的东西。使用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';
            })
        });
    }
});

结果

oneThinganotherThing的调用都正常,但txSites没有。

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

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

enter image description here

2 个答案:

答案 0 :(得分:6)

你应该在&#39; findAll&#39;之后过滤。承诺解决,像这样:

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

同样在海市蜃楼中你应该使用虚线值,所以&#39;网站类型&#39;而不是siteType。

答案 1 :(得分:0)

您没有从模型功能中返回数据。这样做。

model(){ return this.get('store').findAll('site').filter((site) => { return site.siteType === 'tx'; }); } 然后在模板中使用它:

{{#each model as |site|}}

更新

我建议您查询商店:

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

UPDATE2:

你可以在afterModel钩子内过滤txSites,解决模型钩子的所有承诺。