我正在从包含一些信息的远程服务器返回 JSON 数据。 (产品名称和日期)。
我想修改 Handlebars 模板中的日期输出。 Here is a JSBin with my code.
我应该使用属性来更改日期格式吗?或者有更好的方法吗?如果是,我该怎么办?
提前谢谢你。
最佳答案
Ember 助手:
更好的方法是使用 Handlebars Helper将您的日期转换为可用格式。助手优于计算属性的原因在于,它可以在您的代码中任何需要在模板中设置日期格式的地方重复使用。
我有updated the JSBin使用这个助手。
助手:
Ember.Handlebars.helper('dateformat', function(value) {
// Use moment, or alternatively use JavaScript date and return your own custom string
return moment(value).format("DD/MM/YY"); // Change to suitable format. See http://momentjs.com/docs/
});
用法:
{{dateformat item.date}}
注意事项:
此示例使用 MomentJS library将日期转换为 DD/MM/YY
格式,但显然您可以更改它。
可以在不使用此外部库的情况下使用标准 JavaScript date
对象进行转换。助手只需要返回格式化的字符串。
计算属性:
将它作为计算属性来做需要更多的努力。你可以看到一个 working demo of this here .该演示使用您的 localeDate
函数的修改版本。
具有计算日期属性的 Ember 对象:
因此创建一个具有计算属性的 HistoryItem
对象。
App.HistoryItem = Ember.Object.extend({
localeDate: function() {
var dt = new Date(this.get('date'));
return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
}.property('date')
});
更新模型:
该模型是一个普通对象,您需要为历史记录中的每个项目创建一个 HistoryItem
实例。
App.IndexRoute = Ember.Route.extend({
model: function() {
// Get the history
var history = App.JsonRequestFromRemoteServer.history;
var result = [];
// Create item as history item
history.forEach(function(item){
result.push(App.HistoryItem.create(item));
});
// Return the result as the model
return { history: result };
}
});
希望这对您有所帮助。
解决为什么 your JSBin here没用:
您尝试使用 property("history.@each.date")
为集合中的每个项目创建一个计算属性。
不幸的是,它的作用是提供所谓的聚合属性。您可以阅读更多关于 aggregated properties here 的信息,但本质上,这会根据集合中的所有日期为您的历史对象提供一个属性。不是每个项目的单个属性都符合要求。
我确实认为这是 Ember 的一个领域,应该在文档中更好地涵盖,您不是第一个认为可以通过这种方式将计算属性添加到集合的人。
关于javascript - 如何修改我的数据模型以具有计算属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20827401/