0

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

解释

我有一个包含 n 行的一类对象的数组：

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

       }

特征

有时我想更新一行（仅在某些值上），我想用一种会逐渐消失的颜色突出显示修改后的单元格。有没有办法做到这一点？

我发现了一个非常相似的问题，但它不符合我的需要（Knockout JS Update Color）

非常感谢

4

1 回答 1

1

我很久以前写了一个绑定名称突出显示。认为这与您的需要相似。

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

查看jsfiddle 演示

于 2013-04-12T21:25:51.993 回答