항목 변경시 테이블 행을 강조 표시하려면 어떻게해야합니까?

Question

자산 정보가 채워진 데이터 테이블이 있습니다. 사용자가 저작물을 추가/수정/삭제할 수 있으며 저작물을 추가하거나 편집 할 때 해당 표 행을 강조 표시하고 싶습니다.

문제는 애셋이 추가되거나 업데이트 될 때 모든 행이 강조 표시된다는 것입니다. 이것은 테이블을 채우기 위해 계산 된 관찰 가능 항목을 사용하는 것과 관련이 있다고 생각합니다. 계산 된 관찰 가능을 사용하여 테이블을 동적으로 필터링 할 수 있습니다.

다음은 viewmodel과 HTML이 현재 어떤 모습인지 보여주는 예입니다. (필터가 어떤 이유에서든 피들에서 작동하지 않아 왜 당장 이유가 확실하지 않습니다) ->http://jsfiddle.net/c7y2A/1/.

나는 이 가

사람이 나를 그냥 개별 행을 강조 도울 수

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

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

<tr> 요소

에 할당, 간단한 바인딩을 사용하려고? 계산 된 관찰 가능 정보를 사용하지 않기 위해 어떻게 든 설정을 변경해야합니까? 나는 여전히 테이블을 동적으로 필터링 할 수 있어야합니다. 그래야 계산 된 관측 값을 사용하지 않으면 어떻게 작동 할 지 확신 할 수 없습니다.

플래시 클래스는 다만 방법으로 다음을 수행 : 어떤 도움

.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> 

자바 스크립트

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 
}