Question

我有一个数据表，其中填充了资产信息。用户可以添加/编辑/删除资产，当他们添加或编辑资产时，我希望突出显示相应的表格行。

我遇到的问题是，在添加或更新资产时，所有表行都会突出显示，而不仅仅是有问题的行;我认为这可能与我使用计算的observable填充表格有关。我使用计算的observable来允许我动态地过滤表。

以下是viewmodel和HTML目前的示例（过滤器由于某种原因而无法在小提琴中工作，我现在还不确定为什么） - ＆gt; http://jsfiddle.net/c7y2A/1/

我尝试使用分配给<tr>元素的简单绑定

ko.bindingHandlers.flash = {
    update: function (element, valueAccessor) {
        var el = $(element);
        ko.utils.unwrapObservable(valueAccessor());

        el.addClass('flash');
    }
};

任何人都可以帮我突出个别行吗？我是否需要以某种方式更改我的设置以不使用计算的observable？我仍然需要能够动态过滤表格，所以我不确定如果我没有使用计算的可观察量，那将是如何工作的。

flash类只是顺便执行以下操作：

.flash {
    animation: flash 2s ease forwards;
}

@keyframes flash {
    0% {
        background: white;
    }

    35% {
        background: #fffbcc;
    }

    65% {
        background: #fffbcc;
    }

    100% {
        background: white;
    }
}

感谢您提供的任何帮助： - ）

亚当

Answer 1

我认为您需要一些东西来记录资产对象的原始值，以便您可以将当前值与原始值进行比较。使用计算后，您可以输出所需的css。

http://jsfiddle.net/gonefishern/c7y2A/3/

<强> HTML

<input type="text" data-bind="value: filter, valueUpdate: 'afterkeydown'" placeholder="Filter assets" />
<table>
    <thead>
        <tr>
            <th>Asset Name</th>
            <th>Serial Number</th>
            <th>Manufacturer</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data: filteredAssets}">
        <tr data-bind="css: flashCss, click: $parent.selectAsset">
            <td data-bind="text: name"></td>
            <td data-bind="text: serialNumber"></td>
            <td data-bind="text: manufacturer"></td>
        </tr>
    </tbody>
</table>
<br/>
<br/>
<div data-bind="with: selectedAsset">
    <p>Selected Asset</p>
    <label>Asset Name</label>
    <input type="text" data-bind="value: name"/>
</div>

<强>的JavaScript

var asset = function (name, serialNumber, manufacturer) {
    var self = this;
    self.name = ko.observable(name);
    self.serialNumber = ko.observable(serialNumber);
    self.manufacturer = ko.observable(manufacturer);

    self.name.original = name;
    self.serialNumber.original = serialNumber;
    self.manufacturer.original = manufacturer;

    self.hasChanged = ko.computed(function(){
        if (self.name() == self.name.original && self.serialNumber() == self.serialNumber.original && self.manufacturer() == self.manufacturer.original) {
            return false;
        }
        return true;
    });

    self.flashCss = ko.computed(function () {
        //just an example
        if (self.hasChanged()){
            return 'flash';
        }
        return '';
    });
};

var viewmodel = function () {
    var self = this;

    self.filter = ko.observable('');

    self.assets = ko.observableArray([
    new asset("asset 1", "12345", "Dell"),
    new asset("asset 2", "67890", "Dell"),
    new asset("asset 3", "12098", "HP"),
    new asset("asset 4", "55443", "Dell")]);

    // Method to filter the assets table based on user input.  Computed observable is throttled to ensure it doesn't kick in too quickly.
    self.filteredAssets = ko.computed(function () {
        var filter = self.filter().toLowerCase();
        if (!filter) {
            return self.assets();
        } else {
            return ko.utils.arrayFilter(self.assets(), function (item) {
                return item.name().toLowerCase().indexOf(filter) > -1;
            });
        }
    }).extend({
        throttle: 500
    });
    self.selectedAsset = ko.observable();
    self.selectAsset = function(item){
        self.selectedAsset(item);
    };

};

ko.applyBindings(new viewmodel());

<强> CSS

.flash {
    background-color: yellow
}

如何在项目更改时获取表格行以突出显示？

1 个答案: