我的路线看起来像这样:
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.from
和deliverySchedule.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的内容将from
和to
值转换为1pm
和{{1格式分别?
答案 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”}}