Question

我正在使用Ember 1.13.2和Ember Data 1.13.4。 API符合JSON API格式（http://jsonapi.org/format）。

用户有很多项目。在模板中执行{{model.items}}将返回用户的所有项。

如果我还需要显示用户的蓝色项，该怎么办？我应该怎么做呢？

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
     // Executes: http://localhost:3099/api/v1/users/5
    return this.store.findRecord('user', params.user_id);
  }
})

// Template
firstName: {{model.firstName}} - works
<br>items: {{model.items}} - works
<br>blue items: {{model.items}} - what do we do about this?

// app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
  items:        DS.hasMany('item', { async: true }),
  firstName:    DS.attr('string')
});

// app/models/item.js
import DS from 'ember-data';
export default DS.Model.extend({
  user:           DS.belongsTo('user', { async: true }),
  name:           DS.attr('string')
});

Answer 1

我误解了原来的问题。似乎您只想获取颜色为蓝色的项目（并避免获取其余项目）。为此，您需要查询服务器，这需要服务器端代码。但是，一旦完成服务器端代码，就可以执行以下操作：

blueItems: Ember.computed('items.@each.color', {
    get() {
        const query = {
            user: this.get('id'),
            color: 'blue'
        };

        return this.get('store').find('item', query);
    }
})

但同样，您需要服务器支持查询该数据。（JSON API说明了如何返回数据，但您需要自己实现查询。）

在获取显示后过滤项目的旧答案（仅供参考）：

我会使用计算属性：

blueItems: Ember.computed('items.@each.color', {
    get() {
        return this.get('items').filter((item) => {
            return item.get('color') === 'blue';
        });
    }
})

或简写;）

blueItems: Ember.computed.filterBy('items', 'color', 'blue')

并非每个操作都有一个Ember简写，这就是为什么我先给出完整的例子。

将计算属性与promises一起使用有时很棘手，但只要items数组更新，此计算属性就会更新。

我该如何过滤用户的项目？

1 个答案: