在灰烬控制器中按日期过滤模型

时间:2015-08-23 07:28:38

标签: javascript date ember.js coffeescript momentics

我有这个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": "1995-12-25 00:00:00"一样。 如果你们也可以在javascript中提供解决方案(不一定是coffescript)

,那也没问题

1 个答案:

答案 0 :(得分:2)

您可以通过以下几种方式执行此操作:computed.sortSortableMixin,实现自定义排序功能。

目前棘手的事情是你的日期是字符串,所以你需要将它们转换成你可以进行比较的东西(数字时间戳或日期对象等)。您可以在排序期间(在排序功能中)或模型本身进行转换,以便您可以在应用程序的其他位置更轻松地重复使用和格式化日期。

我在下面提供的示例在排序期间进行转换。请注意,由于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|}}