我使用WebApi 2.o和Knockout.js以及Moment.js来解析JSON日期/时间。最初Moments.js在页面加载时工作正常。但是当我更新了Knockout ViewModel时，Moment.js无法以正确的方式解析JSON日期并显示＆＃34;无效的日期＆＃34;错误，无论WebApi返回正确的JSON日期。 这是java脚本：
<script>
function viewModel() {
var self = this;
self.currentPage = ko.observable();
self.pageSize = ko.observable(10);
self.currentPageIndex = ko.observable(0);
self.schedule = ko.observableArray();
self.currentPage = ko.computed(function () {
var pagesize = parseInt(self.pageSize(), 10),
startIndex = pagesize * self.currentPageIndex(),
endIndex = startIndex + pagesize;
return self.schedule.slice(startIndex, endIndex);
});
self.nextPage = function () {
if (((self.currentPageIndex() + 1) * self.pageSize()) < self.schedule().length) {
self.currentPageIndex(self.currentPageIndex() + 1);
}
else {
self.currentPageIndex(0);
}
}
self.previousPage = function () {
if (self.currentPageIndex() > 0) {
self.currentPageIndex(self.currentPageIndex() - 1);
}
else {
self.currentPageIndex((Math.ceil(self.schedule().length / self.pageSize())) - 1);
}
}
self.sortType = "ascending";
self.sortTable = function (viewModel, e) {
var orderProp = $(e.target).attr("data-column")
self.schedule.sort(function (left, right) {
leftVal = left[orderProp];
rightVal = right[orderProp];
if (self.sortType == "ascending") {
return leftVal < rightVal ? 1 : -1;
}
else {
return leftVal > rightVal ? 1 : -1;
}
});
self.sortType = (self.sortType == "ascending") ? "descending" : "ascending";
}
//This must update ViewModel - return data for selected number of days.
self.getDays = function (days) {
var uri = "/api/job?days=" + days;
$.getJSON(uri, function (data) {
ko.mapping.fromJS(data.$values, {}, self.schedule);
})
.error(function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
});
}
}
$(document).ready(function () {
var vm = new viewModel();
$.ajax({
url: "/api/job",
type: "GET",
cache: false,
}).done(function (data) {
vm.schedule(data.$values);
ko.applyBindings(vm);
}).error(function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
});
});
</script>
这是HTML部分：
<div class="well well-sm">
Find schedule for next
<div class="btn-group">
<button type="button" class="btn btn-default" id="7" value="7" data-bind="click: getDays.bind($data, '7')">7 days</button>
<button type="button" class="btn btn-default" id="10" value="10" data-bind="click: getDays.bind($data, '10')">10 days</button>
<button type="button" class="btn btn-default" id="14" value="14" data-bind="click: getDays.bind($data, '14')">14 days</button>
<button type="button" class="btn btn-default" id="30" value="30" data-bind="click: getDays.bind($data, '30')">30 days</button>
<button type="button" class="btn btn-default" id="60" value="60" data-bind="click: getDays.bind($data, '60')">60 days</button>
<button type="button" class="btn btn-default" id="180" value="180" data-bind="click: getDays.bind($data, '180')">180 days</button>
</div>
</div>
<table id="arrival" class="table table-condensed table-striped">
<thead>
<tr data-bind="click: sortTable">
<td></td>
<th data-column="excursion">Name</th>
<th data-column="excursiondate">Date</th>
</tr>
</thead>
<tbody data-bind="foreach: currentPage">
<tr>
<td><a data-bind="attr: { href: '/list/' + $data.kodg }" target="_parent">Tourist list</a></td>
<td data-bind="text: $data.excursion"></td>
<td data-bind="text: moment($data.excursiondate).format('DD.MM', 'ru')"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="pager">
<button data-bind="click: previousPage" class="btn previous"><i class="glyphicon glyphicon-backward"></i></button>
Page
<label data-bind="text: currentPageIndex() + 1" class="badge"></label>
<button data-bind="click: nextPage" class="btn next"><i class="glyphicon glyphicon-forward"></i></button>
</td>
</tr>
</tfoot>
</table>
以下是我在第一次通话时收到的默认数据。
{"$id":"1","$values":[{"$id":"2","kodg":1406621521,"excursion":"Big Buddha Tour","excursiondate":"2014-07-31T00:00:00"},{"$id":"3","kodg":-1434407447,"excursion":"City Tour Gems","excursiondate":"2014-07-29T00:00:00"},{"$id":"4","kodg":-23317405,"excursion":"Transfer JSM","excursiondate":"2014-07-29T00:00:00"},{"$id":"5","kodg":-1035617799,"excursion":"Big Buddha Tour","excursiondate":"2014-07-26T00:00:00"},{"$id":"6","kodg":-277944785,"excursion":"City Tour Gems","excursiondate":"2014-07-25T00:00:00"},{"$id":"7","kodg":1405931911,"excursion":"City Tour Gems","excursiondate":"2014-07-22T00:00:00"},{"$id":"8","kodg":1405759887,"excursion":"City Tour Gems","excursiondate":"2014-07-20T00:00:00"},{"$id":"9","kodg":-699185234,"excursion":"Khao Lak","excursiondate":"2014-07-17T00:00:00"},{"$id":"10","kodg":2047068503,"excursion":"City Tour Gems","excursiondate":"2014-07-15T00:00:00"},{"$id":"11","kodg":164879331,"excursion":"City Tour Gems","excursiondate":"2014-07-13T00:00:00"},{"$id":"12","kodg":228070035,"excursion":"Shopping Tour","excursiondate":"2014-07-13T00:00:00"},{"$id":"13","kodg":1978323751,"excursion":"Khao Lak","excursiondate":"2014-07-10T00:00:00"}]}
以下是我用参数调用getDays后收到的数据集。
{"$id":"1","$values":[{"$id":"2","kodg":1406621521,"excursion":"Big Buddha Tour","excursiondate":"2014-07-31T00:00:00"}]}
我确实将WebApi类更改为如下（为了只接收字符串）：
public class job
{
public string kodg { get; set; }
public string excursion { get; set; }
public string excursiondate { get; set; }
}
但仍有同样的问题。因此，它不依赖于我从WebApi控制器接收的数据。
答案 0 :(得分：1)
如果你可以放入一个jsfiddle，它可能有助于诊断。
我创建了一个简单的视图模型：
function ViewModel() {
excursionDate = ko.observable('09/22/2014 23:49:35.349');
}
ko.applyBindings(new ViewModel());
和这个html：
<span data-bind="text: moment(this.excursionDate()).format('DD.MM', 'ru')"></span>
适用于上述日期，返回“22.09”。我也在2014年9月22日工作，但是如日期为09/22/2014 23：49.356的无效日期，它确实在页面上返回“无效日期”。也许您可以将数据限制为一行或某些内容，清理数据，调试数据甚至使用
<textarea data-bind="text: ko.toJSON($data)"></textarea>
或许可以看到发生了什么，并确保你没有得到你不期望的东西。 HTH