如何格式化模板中的API日期字段?

时间:2015-01-13 07:57:28

标签: ember.js ember-data ember-cli

我的路线看起来像这样:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('deliverySchedule');
  }
});

我的API有效负载会像这样返回deliverySchedules(见下文)。

{

  "delivery_schedules": [
      {
          "id": 47,
          "from": "0001-01-01T09:00:00.000Z",
          "to": "0001-01-01T10:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.663Z",
          "updated_at": "2015-01-12T16:17:05.663Z"
      },
      {
          "id": 62,
          "from": "0001-01-01T09:00:00.000Z",
          "to": "0001-01-01T10:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.684Z",
          "updated_at": "2015-01-12T16:17:05.684Z"
      },
      {
          "id": 48,
          "from": "0001-01-01T10:00:00.000Z",
          "to": "0001-01-01T11:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.665Z",
          "updated_at": "2015-01-12T16:17:05.665Z"
      },
      {
          "id": 63,
          "from": "0001-01-01T10:00:00.000Z",
          "to": "0001-01-01T11:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.685Z",
          "updated_at": "2015-01-12T16:17:05.685Z"
      },
      {
          "id": 49,
          "from": "0001-01-01T11:00:00.000Z",
          "to": "0001-01-01T12:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.666Z",
          "updated_at": "2015-01-12T16:17:05.666Z"
      },
      {
          "id": 64,
          "from": "0001-01-01T11:00:00.000Z",
          "to": "0001-01-01T12:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.686Z",
          "updated_at": "2015-01-12T16:17:05.686Z"
      },
      {
          "id": 50,
          "from": "0001-01-01T12:00:00.000Z",
          "to": "0001-01-01T13:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.668Z",
          "updated_at": "2015-01-12T16:17:05.668Z"
      },
      {
          "id": 65,
          "from": "0001-01-01T12:00:00.000Z",
          "to": "0001-01-01T13:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.687Z",
          "updated_at": "2015-01-12T16:17:05.687Z"
      },
      {
          "id": 66,
          "from": "0001-01-01T13:00:00.000Z",
          "to": "0001-01-01T14:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.688Z",
          "updated_at": "2015-01-12T16:17:05.688Z"
      },
      {
          "id": 51,
          "from": "0001-01-01T13:00:00.000Z",
          "to": "0001-01-01T14:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.669Z",
          "updated_at": "2015-01-12T16:17:05.669Z"
      },
      {
          "id": 67,
          "from": "0001-01-01T14:00:00.000Z",
          "to": "0001-01-01T15:00:00.000Z",
          "period": "tomorrow",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.689Z",
          "updated_at": "2015-01-12T16:17:05.689Z"
      },
      {
          "id": 52,
          "from": "0001-01-01T14:00:00.000Z",
          "to": "0001-01-01T15:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.670Z",
          "updated_at": "2015-01-12T16:17:05.670Z"
      },
      {
          "id": 53,
          "from": "0001-01-01T15:00:00.000Z",
          "to": "0001-01-01T16:00:00.000Z",
          "period": "today",
          "status": "available",
          "created_at": "2015-01-12T16:17:05.672Z",
          "updated_at": "2015-01-12T16:17:05.672Z"
      }
    ]
  }

我有一个看起来像这样的模板:

<ul>
  {{#each deliverySchedule in model}}
    <li>
      {{deliverySchedule.from}} - {{deliverySchedule.from}} ({{deliverySchedule.status}})
    </li>
  {{/each}}
</ul>

我希望deliverySchedule.fromdeliverySchedule.to显示如下内容:1pm - 2pm (available)。现在它显示为:

Tue Jan 01 1901 17:00:00 GMT+0800 (SGT) - Tue Jan 01 1901 17:00:00 GMT+0800 (SGT) available

正确的方法是什么?我应该将delivery_schedules的结果转换为控制器中的新数组,并使用类似moment.js的内容将fromto值转换为1pm和{{1格式分别?

2 个答案:

答案 0 :(得分:1)

显然,我需要在http://www.ember-cli.com/#resolving-handlebars-helpers

之后注册自定义助手
// app/helpers/convert-date-time.js
import Ember from "ember";

export default Ember.Handlebars.makeBoundHelper(function(value, options) {
  var date = new Date(value);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
});

在模板中:

{{convert-date-time deliverySchedule.from}}

答案 1 :(得分:0)

您应该使用handelbar助手来格式化日期:)

以下是有关它的文档: http://emberjs.com/guides/templates/writing-helpers/

你可以在你的助手中使用moment.js,但是根据你的需要,它可能会过度杀戮:)

在ember-cli中使用命令ember generate helper yourhelpername,它将在

中创建一个文件

app/helpers/如下所示:

import Ember from 'ember';

function myhelper(value) {
   //in your case format the date here ...for example ....
  //you can also use moment.js and so on...
  var toReturn=(new Date(value).getHours())+1;
  if(toReturn >11){
     toReturn=toReturn + "  pm";
  }else{
     toReturn=toReturn + " am";
  }
  return toReturn;
}

export { myhelper };

export default Ember.Handlebars.makeBoundHelper(myhelper);

然后使用{{myhelper deliverySchedule.from}}

您还可以通过为选项

添加第二个参数来扩展帮助程序

从'ember'导入Ember;

function myhelper(value,format) {
   //in your case format the date here ...for example ....
  //you can also use moment.js and so on...
  var myDate=new Date(value);
  var toReturn="";
  switch(format){
   case "dmy" : 
      toReturn=myDate.getDate()+" "+(myDate.getMonth()+1)+" "+myDate.getFullYear();   
   break;
   case "ymd" : 
      toReturn=myDate.getFullYear()+" "+(myDate.getMonth()+1)+" "+myDate.getDate();   
   break;
   default : 
       toReturn=(myDate.getMonth()+1)+" "+myDate.getDate(); 
   break;
  }

  return toReturn;
}

export { myhelper };

export default Ember.Handlebars.makeBoundHelper(myhelper);

并在您的模板中使用

{{myhelper deliverySchedule.from“dmy”}}