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

Ember.js 2 How to filter an existing model?

本文关键字：过滤 模型 js 何过滤 Ember      更新时间：2023-09-26

我目前正在学习Ember 2，我正在努力找出在Ember.js（2.4.2带CLI工作流）和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中执行以下操作以按日期进行筛选（假设this.entries是作为模板属性从当前路线传递的"条目"模型）：

// ...
var filtered = this.entries.store.filter("entry", function(entry) {
  var logDate = entry.get("logDate");
  return logDate >= filterDateFrom && logDate <= filterDateTo;
});
this.set("entries", filtered);

此代码正确地按"date-from"answers"date-to"进行筛选，但在用户路由中运行时会覆盖用户名筛选。

快速而肮脏的路线是在日期过滤器回调中复制用户名过滤，但这不是DRY，而且随着更多路线（类别、位置等）的添加，它将很快变得难以处理，因为日期过滤器需要通用。

我的问题

这是一个只使用本地存储作为数据存储的前端应用程序，所以我不能使用后端自动过滤出ember之外的条目。

  1. 是否有任何方法可以根据现有模型进行筛选，而不是总是从全局*.store.filter("modelName", callback)集合开始
  2. 这是一个好方法吗？还是有一种更好、更"Ember"的方法来处理多个任意过滤器

任何帮助都将不胜感激。

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

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

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

过滤器肯定应该由您的适配器完成。如果用户直接输入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
      })
    });
  }
});

您可以通过Ember.computed的filterBy()或filter()方法轻松筛选DS.RecordArray，或者使用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}}
相关文章：