Question

I have a case where I databind to a date field inside model in a list:

function Model(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);
}

<div id="fieldOnPage" data-bind="text: formatDate(myDateField())"></div>

Then, in a modal, I display the same date field so it can be edited:

<div id="fieldInModal" data-bind="text: formatDate(myDateField())"></div>

However, since I’m calling the formatDate function does its work on the unwrapped observable, I’m unable to see the changes get written real-time back onto the main page when I edit the value in the modal.

Another caveat is that I using the ko.mapping plugin so I don’t necessarily have a specific ko.computed field on myDateField. Is this possible to do with an external function like this? If not, how would I do it using the ko.computed if I had to specifically override the myDateField binding?

Answer 1

You could do something like

function Model(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);

    this.formattedDate = ko.computed(function () {
       return formatDate(ko.utils.unwrapObservable(self.myDateField));
    });
}

The bind to the formatted Date

<div id="fieldInModal" data-bind="text: formattedDate"></div>

Hope this helps.