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

Question

I am using Asp.Net MVC 4 and Knockout in a form.

I have a date input that i wish to format.

I ended up with this solution : http://jason-mitchell.com/web-development/binding-dates-using-knockout-moment-js/

My problem is when i submit the form, i don't have the date filled in the posted JSON.

I think the problem is located in the custom handler, but i can't find out :( The update event fires only once at load.

View Code

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

Custom binding Code

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 binding Code

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

Note : the date format is working as expecting.

What am i doing wrong ? :(

Answer 1

Without seeing your ViewModel, I can only speculate. In your code, you are binding EndDate directly to your TextBox:

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

Your EndDate observable doesn't know anything about this value. Therefore, if your EndDate observable looks something like this in your ViewModel:

this.EndDate = ko.observable();

Then it is unaware of the value that was bound directly to the TextBox by your ASP.NET MVC code. Therefore, when you apply your KO bindings, the EndDate value that was bound directly to the TextBox gets destroyed. If this is the case, you can either: (1) initialize the EndDate observable directly from the value bound from the server Model, or, (2) initialize the EndDate observable indirectly by using a custom KO binding that initializes the EndDate observable from the value that was bound directly to the TextBox.

Example 1

This example assumes the JavaScript is directly in your view. If your JavaScript is in a separate file (as is typically the case), then you would have to pass the Model data into your ViewModel using another technique such as JSON serialization on the client before binding your ViewModel.

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

Example 2

The sequential order of the KO binding parameters is important in this example. The new custom binding must be the first binding in order for this to work properly:

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

And here is the code for the custom KO binding:

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);
    }
};

Answer 2

At last, i found the solution !

The custom binding should look like that :

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);
        }           
    },   
};

It uses the default value binding plus my custom date format. Only on init because the update is managed by a datepicker which is correctly formated.