JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<table>
<tbody data-bind="foreach: items">
<tr class="gv">
<td data-bind="text: id"></td>
<td data-bind="text: number"></td>
<td data-bind="text: unixTs"></td>
</tr>
</tbody>
</table>
CSS
td { border: 1px solid gray; padding: 1em; }
JavaScript
var data = [{id: 1,number: 42,date_time: 1375948769449},
{id: 2,number: 106,date_time: 1375948769349}];
var ItemViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
this.unixTs = ko.computed(function () {
var date = new Date(self.date_time());
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
return hours + ':' + minutes + ':' + seconds;
});
};
var mapping = {
'items': {
create: function (item) {
return new ItemViewModel(item.data);
}
}
};
var viewModel = ko.mapping.fromJS({items: data}, mapping, {});
ko.applyBindings(viewModel);