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

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