Ember.js 2如何過濾現有模型？

Question

我目前正在學習Ember 2，並試圖找出在Ember.js（帶有CLI工作流程的2.4.2）和Ember Data中堆疊模型過濾器的最佳方法。

具體來說，我想知道是否存在一種將過濾器應用於現有路由的過濾模型的好方法，而不會覆蓋路由（或其他組件）本身可能在進行的任何過濾。

我的問題是這樣的：

我有按日期排序並按用戶ID（“用戶”模型）與用戶關聯的日志條目（模型“條目”）。

/app/routes/index.js定義的/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是從當前路由作為模板屬性傳遞的“ entry”模型）：

// ...

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”和“ date to”正確過濾，但是在用戶路由中運行時，它將覆蓋用戶名過濾。

快速而骯臟的方法是在日期過濾器回調中復制用戶名過濾器，但這不是DRY，隨着添加更多的路由（類別，位置等），它很快就會變得笨拙，因為需要使用日期過濾器。普遍。

我的問題

這是一個僅前端的應用程序，使用本地存儲作為其數據存儲，因此我無法使用后端自動過濾掉余燼中的條目。

1. 有什么方法可以針對現有模型進行過濾，而不是始終從全局*.store.filter("modelName", callback)集合開始嗎？
2. 這甚至是一個好的方法，還是有更好的，更“ Ember”的方式來處理多個任意過濾器？

任何幫助都表示贊賞。

Answer 1

我用這樣的東西來過濾現有數據

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

您可以使用this.get('store').filter('modelName')從服務器查詢實時記錄。

Answer 2

過濾器一定要由您的適配器完成。 如果用戶輸入user直接的路線，你不會有任何entry中存儲記錄。 只有當用戶通過index路徑進入時，您才能使用hack。

我也認為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()對其進行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}}