在emberjs中显示模型数据的子集

时间:2016-09-04 13:20:25

标签: ember.js

我的路线中有以下内容

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.query('post',{published:true});
    }
});

以及呈现模型的post-viewer组件。我面临的问题是filter。如何在不加载模型的情况下实现相同的功能。目前我只是传递组件中的模型并使用以下

{{#each posts as |item|}}
{{/each}}

渲染元素。我可以根据包含某些特定关键字的标题过滤它们的正确方法是什么。我尝试在每个循环中使用this.store.query,但这没有用。

2 个答案:

答案 0 :(得分:1)

如果您使用this.store.query ember https://developer.android.com/reference/android/content/res/Resources.Theme.html#applyStyle(int。所以你可能应该使用.findAll(),然后在客户端过滤数据。一个简单的方法是在model()钩子里面:

return this.store.findAll('post')
  .then(posts => posts.filter(post => get(post, 'published') === true));

这将起作用,因为ember-data会缓存findAll()的结果并且过滤器在客户端上执行。您可以使用计算属性执行相同操作。这有一些好处,例如,您可以根据其他属性进行过滤。控制器中的计算属性,例如:

filteredModel: Ember.computed('model.@each.name', 'searchName', {
  get() {
    return get(this, 'model').filter(record => get(record, 'name') === get(this, 'searchName'));
  }
});

答案 1 :(得分:0)

您可以使用

https://github.com/DockYard/ember-composable-helpers

filter / filterBy

过滤器 - 通过回调过滤数组。

{{#each (filter (action "isActive") users) as |user|}}
  {{user.name}} is active!
{{/each}}

filter-by 按属性过滤数组。

{{#each (filter-by "isActive" true users) as |user|}}
  {{user.name}} is active!
{{/each}}

如果省略第二个参数,它将测试该属性是否真实。

{{#each (filter-by "address" users) as |user|}}
  {{user.name}} has an address specified!
{{/each}}

您还可以将操作作为第二个参数传递:

{{#each (filter-by "age" (action "olderThan" 18) users) as |user|}}
  {{user.name}} is older than eighteen!
{{/each}}

<强> P.S。 另一个变体(纯Ember.js) - 创建计算属性并迭代它。并且在计算属性过滤器项内部