MVC 4 - Knockout 自定义绑定和日期格式答案

【问题标题】：MVC 4 - Knockout custom binding and date formatMVC 4 - Knockout 自定义绑定和日期格式
【发布时间】：2014-08-20 04:29:56
【问题描述】：

我在表单中使用 Asp.Net MVC 4 和 Knockout。

我有一个想要格式化的日期输入。

我最终得到了这个解决方案： http://jason-mitchell.com/web-development/binding-dates-using-knockout-moment-js/

我的问题是当我提交表单时，我没有在发布的 JSON 中填写日期。

我认为问题出在自定义处理程序中，但我找不到:( 更新事件仅在加载时触发一次。

查看代码

@Html.TextBoxFor(Function(model) model.EndDate, New With {.data_bind = "date: EndDate"})

自定义绑定代码

ko.bindingHandlers.date = {   
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var allBindings = allBindingsAccessor();

        // Date formats: http://momentjs.com/docs/#/displaying/format/
        var pattern = allBindings.format || 'L';

        var output = "";
        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format(pattern);
        }

        if ($(element).is("input") === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }
    }
};

ko绑定代码

var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson()));
ko.applyBindings(viewModel);

注意：日期格式按预期工作。

我做错了什么？ :(

【问题讨论】：

标签： asp.net-mvc date knockout.js format

【解决方案1】：

没有看到您的 ViewModel，我只能推测。在您的代码中，您将 EndDate 直接绑定到您的 TextBox：

@Html.TextBoxFor(Function(model) model.EndDate, New With {.data_bind = "date: EndDate"})

您的 EndDate 可观察对象对此值一无所知。因此，如果您的 EndDate observable 在您的 ViewModel 中看起来像这样：

this.EndDate = ko.observable();

然后它不知道由您的 ASP.NET MVC 代码直接绑定到 TextBox 的值。因此，当您应用 KO 绑定时，直接绑定到 TextBox 的 EndDate 值会被破坏。如果是这种情况，您可以：（1）直接从服务器模型绑定的值初始化 EndDate observable，或者，（2）使用自定义 KO 绑定间接初始化 EndDate observable，该绑定从直接绑定到 TextBox 的值。

示例 1

此示例假定 JavaScript 直接在您的视图中。如果您的 JavaScript 位于单独的文件中（通常是这种情况），那么您必须在绑定您的 ViewModel 之前使用另一种技术（例如客户端上的 JSON 序列化）将模型数据传递到您的 ViewModel。

this.EndDate = ko.observable('@Model.EndDate.ToString()');

示例 2

KO 绑定参数的顺序在此示例中很重要。新的自定义绑定必须是第一个绑定才能正常工作：

@Html.TextBoxFor(Function(model) model.EndDate, New With {.data_bind = "initInputFromView: EndDate, date: EndDate"})

这是自定义 KO 绑定的代码：

ko.bindingHandlers.initInputFromView = {
    init: function (element, valueAccessor) {
        // reads the value stored in the <input> value attribute and initializes the observable with that value
        valueAccessor()(element.value);
    }
};

【讨论】：

事实上，我用该行填充了 ko viewModel： var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson())); @Html.Raw(Model.ToJson()));给我 EndDate 的 Json ： "{"EndDate":"2014-12-31T00:00:00"}" With alert(viewModel.EndDate());就在 var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson()));我得到“2014-12-31T00:00:00”。所以我认为，它知道初始值。没有自定义绑定“日期”，绑定工作得很好。还有其他线索吗？ ://

【解决方案2】：

我终于找到了解决办法！

自定义绑定应该如下所示：

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {       
        ko.bindingHandlers.value.init(element, valueAccessor, 
             allBindingsAccessor, viewModel, bindingContext);

        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var allBindings = allBindingsAccessor();
        // Date formats: http://momentjs.com/docs/#/displaying/format/
        var pattern = allBindings.format || 'L';

        var output = valueUnwrapped;
        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format(pattern);
        }

        if ($(element).is("input") === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }           
    },   
};

它使用默认值绑定加上我的自定义日期格式。仅在 init 上，因为更新由格式正确的日期选择器管理。

【讨论】：