过滤余烬中的存储数据 [英] Filtering store data in ember

查看:98
本文介绍了过滤余烬中的存储数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在海市rage楼提供的有麻烦的Ember路由中过滤一些硬编码数据。

I am trying to filter some hard coded data in an Ember route which is being provided by mirage and having trouble.

Ember抱怨着我的语法(在商店尝试使用 filter 时),或者它不返回当我使用 findAll 然后在对象上使用JS筛选器方法时,所有数据。

Either Ember moans at my syntax (when trying to use filter on the store) or it doesn't return any data when I use findAll and then use the JS filter method on the objects.

尝试1-使用findAll():

Attempt 1 - Using 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>

海市rage楼端点

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

Successful request: GET /sites Object {data: Array[2]}

但下拉列表没有任何限制(其他调用我不是

But nothing bound to the dropdown (other calls where I'm not trying to filter the results work ok).

尝试#2:使用 filter

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

结果

未调用API

尝试#3:使用过滤器

Attempt #3 : using filter

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

Successful request: GET /sites?siteType=tx Object {data: Array[2]}

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

But no data bound to the select item.

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

It feels like I'm missing something basic here. Using ember 2.5 and ember data 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 otherThing 的调用都可以绑定,但是 txSites 不会。

Both the calls to oneThing and anotherThing bind ok, but txSites does not.

作为进一步的测试,我从 .filter > txSites 属性,它很高兴地返回整个数据集并绑定好(所以我很高兴它是导致问题的过滤器,并且绑定还可以)。

As a further test I removed the .filter from the txSites property and this happily returns the whole dataset and binds ok (so I'm happy that it's the filter causing the problem and the binding is ok).

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

结果

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

No data returned, console logging the site inside the filter seems to be a promise not the result of the resolved promise.

推荐答案

您应该仅在'findAll'之后进行过滤诺言解决,像这样:

You should just filter after the 'findAll' promise resolves, like this:

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

在海市rage楼中,您也应该使用值用反数字表示,因此以网站类型代替siteType。

这篇关于过滤余烬中的存储数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆