javascript - 使用 knockout.js 和 moment.js 时无效的日期

Question

我将 Knockout 与 moment.js 和 C# 结合使用。在 C# 中，我使用以下方法传入 ISO 格式的日期: var jsonString = JsonConvert.SerializeObject(dataObject}, new IsoDateTimeConverter());

在我的 HTML 文件中，我正在执行以下操作以格式化的方式显示我的日期:

<script type="text/javascript">
var viewModel = {};
$.getJSON("http://www.test.com/jsonfile.txt", function(data) { 
viewModel.model = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
});
</script>
<div>Hello</div>
<div>Time: <span data-bind="text: moment(model.Time).format('L')"></span></div>

我总是收到无效日期，但是当我使用时:

<div>Time: <span data-bind="text: model.Time"></span></div>

它只是正确显示时间:2014-08-25T09:49:00

有人知道我做错了什么吗？

Answer 1

fromJS创建 observables , 所以 model.Time 是一个函数。所以:

<span data-bind="text: moment(model.Time()).format('L')"></span>
<!-- Change is here --------------------^^                   -->

但是 KO 方法可能是为此创建一个计算可观察对象:

<script type="text/javascript">
var viewModel = {};
$.getJSON("http://www.test.com/jsonfile.txt", function(data) { 
    viewModel.model = ko.mapping.fromJS(data);
    viewModel.model.FormattedTime = ko.computed(function() {
        return moment(viewModel.model.Time()).format('L');
    });
    ko.applyBindings(viewModel);
});
</script>
<div>Hello</div>
<div>Time: <span data-bind="text: model.FormattedTime"></span></div>

或者更好的是，您自己的绑定(bind):Live Example

ko.bindingHandlers.formattedTime = {
  update: function(element, valueAccessor) {
    $(element).text(moment(ko.unwrap(valueAccessor())).format('L'));
  }
};

然后:

<div>Time: <span data-bind="formattedTime: model.Time"></span></div>