格式化Breeze使用moment.js检索的日期。热毛巾模板

时间:2013-06-14 22:06:57

标签: knockout.js breeze hottowel momentjs

我一直在关注John Papa的热毛巾教程,我有一个c#类看起来像这样:

public class Lead
{
    public int LeadId { get; set; }
    public DateTime? LastContactMade { get; set; }
    public DateTime? LastContactAttempt { get; set; }
}

我正在使用微风检索客户端中的数据,但我无法弄清楚如何使用moment.js和knockout.js格式化日期。当我使用以下敲除装订显示未格式化的日期时:

<section data-bind="foreach: leads">
    <span data-bind="text: lastContactMade"></span>
    <span data-bind="text: lastContactAttempt"></span>
</section>

日期以以下格式显示:

Wed Feb 27 2013 03:28:00 GMT-0800 (Pacific Standard Time)

当我尝试使用moment.js格式化它们时如下:

<section class="article-list" data-bind="foreach: leads">
    <span data-bind="text: moment(lastContactMade).format('l LT')"></span>
    <span data-bind="text: moment(lastContactAttempt).format('l LT')"></span>
</section>

结果输出如下所示:

NaN/NaN/0NaN 12:NaN AM

我还试过在我的模型中的LeadInitializer中进行格式化(这是我更喜欢的):

function leadInitializer(lead) {
    lastContactAttempt = lead.lastContactAttempt;
    lastContactMade = lead.lastContactMade;
    lead.lastContactAttempt = ko.computed({
        read: function () {
            return moment(lastContactAttempt).format('l LT');
        },
        write: function () {
            return lastContactAttempt;
        }
    });
    lead.lastContactMade = ko.computed({
        read: function () {
            return moment(lastContactMade).format('l LT');
        },
        write: function () {
            return lastContactMade;
        }
    });
};

这样做,我仍然得到相同的输出:

NaN/NaN/0NaN 12:NaN AM

我已经阅读了

的帖子

Date formatting issues with Knockout and syncing to breeze.js entityAspect modified

但它似乎对我没有帮助。有人可以告诉我哪里出错了吗?

1 个答案:

答案 0 :(得分:6)

我想你只是忘了打开Knockout可观察物:

// add parentheses here......................vv
<span data-bind="text: moment(lastContactMade()).format('l LT')"></span>
<span data-bind="text: moment(lastContactAttempt()).format('l LT')"></span>

使用Breeze加载实体时,所有属性都将创建为Knockout observables。您可以直接在data-bind Knockout绑定中使用这些observable,但由于moment.js不知道如何处理Knockout observable,您必须首先打开observable来获取纯JavaScript日期值。