Edit: My answer was a bit too general. An attempt to be more specific.
Map your WorkflowRules to their own "viewmodels", and you can do anything you like:
this.workflowRules = ko.observableArray(sampleData.WorkflowRules
.map(function(jsonRule) {
// Add UI helpers (create a sort of viewmodel)
var timeSentMoment = moment(jsonRule.TimeSent);
// Purely for display purposes:
jsonRule.timeSentLabel = timeSentMoment.format('DD/MM/YYYY h:mm a');
// Do what ever you want to create the right url
jsonRule.href = jsonRule.TimeSent;
return jsonRule;
}));
Then, in your template:
<div data-bind="with: $parent.entity">
<a data-bind="text: timeSentLabel,
attr: {href: href}"></a>
</div>';
Which is defined in js:
var timeSentTemplate = '<div data-bind="with: $parent.entity"><a data-bind="text: timeSentLabel, attr: {href: href}"></a></div>';
var columnDefs = [
{ cellTemplate: timeSentTemplate, /* etc. */ }
];
I hope I finally got your question correctly...
(https://plnkr.co/edit/93ucvDLk5bUFtU4dB1vn?p=preview, moved some stuff around)
Previous, more general answer:
When you create a knockout binding, knockout automatically wraps the second part of the binding in a function. For example:
data-bind="text: myTextObservable"
Is processed as:
text: function (){ return myTextObservable }
Additionally, knockout uses this function to create a computedObservable. This will create a subscription to any observable used inside the function, making sure the data-bind is re-evaluated if any of them changes.
This means that in your case, you can define your format rule inside your data-bind like so (assuming timeSent is an observable`):
data-bind="text: moment($parent.entity.timeSent()).format('DD/MM/YYYY h:mm a') "
Knockout will see that the timeSent observable is called and make sure the whole binding gets updated correctly. Here's an example:
var date = ko.observable(new Date());
var addDay = function() {
date(moment(date())
.add(1, "day")
.toDate()
);
};
ko.applyBindings({
date: date,
addDay: addDay
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<strong>The "raw" observable</strong>
<div data-bind="text: date"></div>
<br/>
<strong>A "computed" text defined in the data-bind</strong>
<div data-bind="text: moment(date()).format('DD-MM-YY')"></div>
<button data-bind="click:addDay">add a day</button>
My advice however is to create a separate computed observable inside your viewmodel. After all, this is what viewmodels are meant to do, and it will help you out a great deal when fixing bugs. I.e.:
// Add to your entity view model:
this.timeSentLabel = ko.computed(function() {
return moment(this.timeSent())
.format('DD/MM/YYYY h:mm a');
}, this);
