如何修改我的数据模型以获得计算属性？

Question

我从远程服务器返回JSON数据，该服务器包含一些信息。 （产品名称和日期）。

我想修改手柄模板中的日期输出。 Here is a JSBin with my code.

我是否应该使用属性来更改日期的格式？或者有更好的方法吗？如果是，我该怎么办？

提前谢谢。

Answer 1

Ember Helper：

更好的方法是使用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的一个区域，应该在文档中更好地介绍，你不是第一个认为可以通过这种方式向计算集添加计算属性的人。