javascript - 如何修改我的数据模型以具有计算属性？

Question

我正在从包含一些信息的远程服务器返回 JSON 数据。 (产品名称和日期)。

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

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

提前谢谢你。

Answer 1

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 的一个领域，应该在文档中更好地涵盖，您不是第一个认为可以通过这种方式将计算属性添加到集合的人。