使用Asp.Net MVC和KnockoutJS处理日期

Question

我最近开始使用KnockoutJs并很快意识到使用默认Json(myModelWithADate)导致默认的json编码.\/Date(-62135578800000)\/ 通过一些研究,我找到了四种可能的方法来处理dom元素中日期的显示.

1)创建一个绑定,处理从Json日期到您想要的格式的转换

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var jsonDate = valueAccessor();
        var value = new Date(parseInt(jsonDate.substr(6)));
        var ret = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
        element.innerHTML = ret;
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

用法

<td data-bind="date: DueDate">
</td>

2)从控制器返回"字符串"

return Json(new {MyDate = DateTime.Now.ToShortDateString()});

3)使用JSON.NET指定在james.newtonking.com上看到的日期时间格式

例

string isoJson = JsonConvert.SerializeObject(entry, new IsoDateTimeConverter());
// {"Details":"Application started.","LogDate":"2009-02-15T00:00:00Z"}

4)使用JSON.parse来处理您的日期,如此stackoverflow答案中所示.

JSON.parse(jsonText, function(key, value) {
    // Check for the /Date(x)/ pattern
    var match = /\/Date\((\d+)\)\//.exec(value);
    if (match) {
        var date = new Date(+match[1]); // Convert the ticks to a Date object
        return humanReadable(date); // Format the date how you want it
    }

    // Not a date, so return the original value
    return value;
});

他们似乎都工作,但我仍然在努力与哪一个感觉"正确".现在,我的内心正在与绑定和返回的字符串混合.正如我可以看到自己扩展绑定以使用jQuery UI datepicker控件处理输入.

处理显示日期或其他类型(如货币)时是否有可接受的做法？我还缺少另一个可以解决这个问题的选择吗？

Answer 1

我个人认为JSON.NET解决方案是最好的,因为它对客户端的影响较小.所有其他解决方案都需要额外的客户端解析或其他客户端代码.

我已经切换到使用JSON.NET来使用所有使用JSON的ASP .NET代码,因为它是一个更加可自定义的库.

例如,我必须在MVC中实现符合Google的Chart API的 JSON数据(与Knockout结合用于分页等),默认情况下JavascriptSerializer根本无法做到.

除了JSON.NET,你可以自定义它以实际吐出完整的Knockout视图模型,这样你甚至不需要使用映射插件.

我写了一个名为FluentJson.NET的示例库,它允许您在Razor中执行以下操作:

var viewModel = @JsonObject.Create()
    .AddProperty("name", "value")
    .AddObservable("knockoutProperty", 123)

得到:

var viewModel = {"name":"value","knockoutProperty":ko.observable(123)}

因此,您可以获得一个Knockout视图模型,而无需任何客户端环节.

你可以轻松地扩展这样的东西来处理日期值,但你更喜欢.

Answer 2

我建议通过ko.mapping.fromJS( data, mapping )这个中间人方法 可以让你自定义甚至用户定义的对象.

var $data = { _ID : '1', _Created : someDate };  
var $mapping = {
    '_Created' : {
       update: function (options) {
           return convertdata( options.data );
       }
    }
}
var viewDataModel = ko.mapping( data, mapping );  
ko.applyBindings( viewDataModel );

mapping参数允许您轻松处理更改,也可以轻松地使用数组.

Answer 3

在knockoutjs中处理日期的更好方法是使用时刻库​​并处理像boss这样的日期.您可以轻松处理/ Date(-62135578800000)/等日期.无需担心控制器中序列化日期的方式.

方法1:直接在视图中:

让我们说你的淘汰模型在一个名为sentDate的可观察对象中得到这样的日期,现在它有值/日期(-62135578800000)/.要在视图中绑定它,您可以:

<p><label>Date</label>: <span data-bind="moment(sentDate).format('MM/DD/YYYY')"></span></p>

方法2:在自定义绑定中

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var jsonDate = valueAccessor();     
        var ret = moment(jsonDate).format('MM/DD/YYYY');
        element.innerHTML = ret;
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

用法和你说的一样:

<td data-bind="date: sentDate">
</td>

momentjs支持日期上的大量日期时间格式和实用程序功能.