Ember.js 2如何过滤现有模型?

时间:2016-03-29 00:06:07

标签: javascript ember.js filter ember-data

我目前正在学习Ember 2,我正试图找出在Ember.js(使用CLI工作流程的2.4.2)和Ember Data中堆叠模型过滤器的最佳方法。

具体来说,我想知道是否有一种很好的方法可以将过滤器应用于现有路由的过滤模型,而不会覆盖路由(或其他组件)本身可能正在进行的任何过滤。

我的问题是:

我有日志条目(型号"条目"),按日期排序并按用户ID与用户关联(型号"用户")。

/app/routes/index.js中定义的模型:

export default Ember.Route.extend({
  // ...

  model: function() {
    return Ember.RSVP.hash({
      users: this.store.findAll("user")
      entries: this.store.findAll("entry")
    });
  },

  // ...
});

模型在/app/routes/user.js

中被覆盖
export default Ember.Route.extend({
  // ...

  model: function() {
    return Ember.RSVP.hash({
      users: this.store.findAll("user")
      entries: this.store.filter("entry", function(entry) {
        // ...
        return entry.get("userId") === userId;
      })
    });
  },

  // ...
});

查看时,localhost:4200/列出所有条目,localhost:4200/user/alice列出名为" alice"的用户拥有的所有条目。同样,localhost:4200/user/bob按用户列出所有条目" bob"。

我还有一个过滤组件,允许按日期过滤条目。

具体而言,在"来自"之后或之后的条目日期和/或在"到"之前或之前的条目日期。这些日期过滤器需要能够应用于索引和用户路由。

问题在于用户路线。我可以在/app/components/log-filter.js中执行以下操作来按日期过滤(假设{​​{1}}是"条目"模型作为模板属性从当前路由传递):

this.entries

此代码正确过滤"日期来自"和"日期到",但它会在用户路径中运行时覆盖用户名过滤。

快速而肮脏的路线是在日期过滤器回调中复制用户名过滤,但这不是DRY,因为添加了更多路径(类别,位置等),它会很快变得难以处理,因为日期过滤器需要普及。

我的问题

这是一个仅使用本地存储作为数据存储的前端应用程序,因此我无法使用后端自动过滤掉ember之外的条目。

  1. 有没有办法过滤现有模型,而不是总是从全球// ... var filtered = this.entries.store.filter("entry", function(entry) { var logDate = entry.get("logDate"); return logDate >= filterDateFrom && logDate <= filterDateTo; }); this.set("entries", filtered); 集合开始?
  2. 这是一个好方法还是有更好的,更多的&#34; Ember&#34;处理多个任意过滤器的方法?
  3. 任何帮助都表示赞赏。

2 个答案:

答案 0 :(得分:2)

我使用这样的东西来过滤现有数据

this.get('store').peekAll('role').filter( (role) => {
  return role.get('name') == 'Alan';
});

您可以使用this.get('store').filter('modelName')从服务器查询实时记录。

答案 1 :(得分:1)

过滤器绝对应该由您的适配器完成。如果用户直接输入user路由,则您的商店中不会有任何entry条记录。只有当用户通过index路线输入时,您才能正常工作。

此外,我认为userId未定义。我想这是user路线的动态片段?

// /app/routes/user.js
export default Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      user: this.store.findRecord("user", params.userId)
      entries: this.store.query("entry", {
        filter: params.userId
      })
    });
  }
});

您可以轻松地按DS.RecordArray filterBy()filter()方法过滤Ember.computed或使用sort()对其进行排序。

// /app/component/user-view.js
Ember.Component.extend({
  filterDateFrom: new Date(),
  filterDateTo: new Date(new Date().setDate(new Date().getDate() + 7)),
  filteredEntries: Ember.computed.filter('entries', function(entry) {
    var logDate = entry.get("logDate");
    return logDate >= this.get('filterDateFrom') && logDate <= this.get('filterDateTo');
  })
});

// /app/templates/user.hbs
{{user-view entries=model.entries}}