如何獲取表格行以突出顯示項目更改的時間？

Question

我有一個填充了資產信息的數據表。用戶可以添加/編輯/刪除資產，當他們添加或編輯資產時，我希望相應的表格行被突出顯示。

我遇到的問題是，當添加或更新資產時，所有表格行都會突出顯示，而不僅僅是所討論的行;我認爲這可能與我使用計算觀察值來填充表格有關。我使用計算的observable允許我動態地過濾表。

下面是視圖模型和HTML當前的樣子的示例（由於某種原因，過濾器在小提琴中不起作用，我不確定爲什麼） - >http://jsfiddle.net/c7y2A/1/。

我試圖用一個簡單的綁定，分配給<tr>元素

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

     el.addClass('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 
}