KnockoutJS: How to color table cell (+fade away) - css

Question

I'm discovering the awesome KnockoutJS library and I'm stuck on a feature I would like to implement:
Explanation
I have an array containing n lines of a type of object:
Html:
<tbody data-bind="foreach: indexItems">
<tr data-bind="click: $parent.UpdateInterfaceItems, css: { 'active-row' : $root.selecteditem() === $data }">
<td data-bind="text: param1"></td>
<td data-bind="text: param2"></td>
<td data-bind="text: param3"></td>
</tr>
</tbody>
Javascript:
function ViewModel() {
var self = this;
//Public Properties
self.selecteditem = ko.observable();
self.indexMats = ko.observableArray();
....
hub.client.receivedNewValue= function (param1Value, param2Value, param3Value)
{
var match = ko.utils.arrayFirst(vm.indexItems(), function (item) {
return item.param1() == param1Value;
});
if (match)
{
match.param1(param1Value);
match.param2(param2Value);
match.param3(param3Value);
}
}
}
Feature
Sometimes I want to update one row (on some values only) and I would like to highlight the modified cell with a color which would fade away. Is there any way to do that?
I've found out a quite similar question but it doesn't match my need (Knockout JS Update Color)
Thanks a lot

Answer 1

I have written a binding name highlight long time ago. Think that is smilar to what you need.
ko.bindingHandlers.highlight = {
update: function(element, valueAccessor) {
ko.toJS(valueAccessor());
var old = parseInt($(element).html(),10);
var current = parseInt(valueAccessor()(),10);
if ($(element).data("ko_init")) {
if(current < old) {
$(element).effect('highlight', {
color: '#AA0000'
}, 1000);
} else if (current>old ) {
$(element).effect('highlight', {
color: '#00AA00'
}, 1000);
}
}
else {
$(element).data("ko_init", true);
}
}};
function Table(rowCount, columnCount, headItems, initiliaze) {
var self = this;
var Cell = function(data, css, animate) {
var cellInstance = this;
this.data = ko.observable(data);
this.css = ko.observable(css);
this.animate = ko.observable(animate);
}
this.rowCount = ko.observable(rowCount);
this.columnCount = ko.observable(columnCount);
this.headItems = ko.observableArray(headItems);
this.rowsData = ko.observableArray();
if (initiliaze) {
for (var i = 0; i < rowCount; i++) {
var tmpArray = new Array();
for (var j = 0; j < columnCount; j++)
tmpArray.push(new Cell("0", "", ""));
self.rowsData.push(ko.observableArray(tmpArray));
}
}}
function ViewModel() {
var self = this;
this.table = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);
};
$(function() {
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
function changeData(x, y, data) {
viewModel.table.rowsData()[x]()[y].data(data);
}
setInterval(function() {
changeData(parseInt(Math.random(1000) * 5, 10), parseInt(Math.random(1000) * 4, 10), parseInt(Math.random(1000) * 10000, 10));
}, 1000);
})
Check out jsfiddle demo