Css KnockoutJS：如何给表格单元格着色（+；淡出）

我发现了一个很棒的KnockoutJS库，我想实现一个功能：

解释

我有一个数组，其中包含一种对象类型的n行：

Html:

功能

有时我想更新一行（仅在某些值上），并且我想用褪色的颜色突出显示修改后的单元格。有办法吗

我发现了一个非常类似的问题，但它不符合我的需要（）

---

非常感谢

我很久以前就写了一个绑定名。认为这是你所需要的微笑

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);
})

ko.bindingHandlers.highlight={
更新：函数（元素、值访问器）{
toJS（valueAccessor（））；
var old=parseInt（$（element.html（），10）；
var current=parseInt（valueAccessor（）（），10）；
if（$（元素）.data（“ko_init”））{
如果（当前<旧）{
$（元素）.effect（'突出显示'{
颜色：“#AA0000”
}, 1000);
}否则如果（当前>旧）{
$（元素）.effect（'突出显示'{
颜色：“#00AA00”
}, 1000);               
}
}
否则{
$（元素）。数据（“ko_init”，真）；
}
}};
函数表（行数、列数、标题项、初始化）{
var self=这个；
变量单元格=函数（数据、css、动画）{
var cellconstance=this；
this.data=可观察到的ko（数据）；
this.css=ko.observable（css）；
this.animate=ko.observable（animate）；
}
this.rowCount=ko.可观察（rowCount）；
this.columnCount=ko.可观察（columnCount）；
本项目总目=可观测总目（总目）；
this.rowsData=ko.observableArray（）；
如果（初始化）{
对于（变量i=0；i

---

检查一下

这正是我需要的。谢谢。

        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);
            }
          }

       }

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);
})