在 Ember 控制器中按日期过滤模型答案

【问题标题】：Filter Model In By Dates in Ember Controller在 Ember 控制器中按日期过滤模型
【发布时间】：2015-11-16 19:27:48
【问题描述】：

我有这个 DS.Model

   Model = DS.Model.extend

  date: DS.attr "string"
  amount_payed: DS.attr "string"
  user_name:DS.attr "string"

`export default Model`

目前我的控制器中没有任何内容

Controller = Em.Controller.extend()

export default Controller

这是路线

 Route = Ember.Route.extend 

  model: () ->
    return @store.find "user-account"

`export default Route`

从服务器，我得到了带有日期值的 json 响应

"date": "1995-12-25 00:00:00"

这是示例模板

{{#each detail in model}}
 <li>{{detail.date}}{{detail.amount_paid}}{{detail.user_name}}</li>
{{/each}}

如何在我的控制器中对模型进行排序/过滤，以便当模板使用 {{#each detail in model}} 呈现模型时，首先显示具有最新日期的详细信息。基本上我想使用 date 属性对模型进行排序。记住日期就像"date": "1995-12-25 00:00:00"。如果你们也可以在 javascript 中给出解决方案（不一定是 coffescript）

【问题讨论】：

标签： javascript date ember.js coffeescript momentics

【解决方案1】：

有几种方法可以做到这一点：computed.sort、SortableMixin，实现自定义排序功能。

目前棘手的事情是您的日期是字符串，因此您需要将它们转换为可以运行比较的东西（数字时间戳或日期对象等）。您可以在排序期间（在排序函数中）或在模型本身上进行该转换，以便您可以在应用程序的其他位置更轻松地重用和格式化日期。

我在下面提供的示例在排序期间进行转换。请注意，您不能只执行 (new Date(string))，因为 Safari 中的日期解析存在错误。

此答案假定使用 ember-cli 和从 Ember 2.0 开始是当前最佳实践的语法

computed.sort 的文档在这里：http://emberjs.com/api/classes/Ember.computed.html#method_sort

import Ember from 'ember';

const {
  computed,
  Controller
} = Ember;

export default Controller.extend({
  sortedModel: computed.sort('model', function(a, b) {
    let timestampA = makeTimestamp(a);
    let timestampB = makeTimestamp(b);

    if (timestampA > timestampB) {
      return 1;
    } else if (timestampA < timestampB) {
      return -1;
    }
    return 0;
  })
});


// ideally you'd just return date, and call this makeDate
// and probably you'd do this when setting the date onto the model
function makeTimestamp(dateString) {
  let arr = dateString.split(/[- :]/);
  let date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
  date.setTime( date.getTime() - date.getTimezoneOffset() * 60 * 1000 );
  return date.getTime();
}

然后你会像这样在你的模板中使用它。

{{#each sortedModel as |detail|}}
  <li>{{detail.date}}{{detail.amount_paid}}{{detail.user_name}}</li>
{{/each}}

快速说明，{{#each detail in model}} 是一个已弃用的语法，从 ~1.10 开始的当前语法是 {{#each model as |detail|}}。

【讨论】：