javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(VirtualScroll): initialise differ with trackByFn (#11492)

Browse Source 
* fix(VirtualScroll): initialise differ with trackByFn

* fix(VirtualScroll): DRY up differ initialization
This commit is contained in:
Michael Asimakopoulos
2017-05-05 01:20:58 +03:00
committed by Manu MA
parent 646d736d07
commit 299a68bcdc
3 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/virtual-scroll/test/basic/app.module.ts
View File

@ -58,6 +58,10 @@ export class E2EPage {
window.location.reload(true);
}
trackByFn(index: number, item: any) {
return item.value;
}
}

9
src/components/virtual-scroll/test/basic/main.html
View File

@ -19,15 +19,16 @@
<button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
</div>
<ion-list [virtualScroll]="items"
[headerFn]="headerFn">
<ion-list [virtualScroll]="items" [headerFn]="headerFn" [virtualTrackBy]="trackByFn"
approxItemHeight="46px">
<ion-item-divider *virtualHeader="let header">
Header: {{header}}
Header: {{ header }}
</ion-item-divider>
<ion-item *virtualItem="let item">
Item: {{item.value}} {{item.someMethod()}}
Item: {{ item.value }} {{ item.someMethod() }}
</ion-item>
</ion-list>

20
src/components/virtual-scroll/virtual-scroll.ts
View File

@ -234,6 +234,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
};
_queue: number = SCROLL_QUEUE_NO_CHANGES;
_recordSize: number = 0;
_virtualTrackBy: TrackByFn;
@ContentChild(VirtualItem) _itmTmp: VirtualItem;
@ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
@ -249,9 +250,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
@Input()
set virtualScroll(val: any) {
this._records = val;
if (isBlank(this._differ) && isPresent(val)) {
this._differ = this._iterableDiffers.find(val).create(this.virtualTrackBy);
}
this._updateDiffer();
}
/**
@ -368,7 +367,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
/**
* @input {function} Same as `ngForTrackBy` which can be used on `ngFor`.
*/
@Input() virtualTrackBy: TrackByFn;
@Input()
set virtualTrackBy(val: TrackByFn) {
if (!isPresent(val)) return;
this._virtualTrackBy = val;
this._updateDiffer();
};
constructor(
@ -481,6 +485,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
return null;
}
private _updateDiffer(): void {
if (isBlank(this._differ) && isPresent(this._records)) {
this._differ = this._iterableDiffers.find(this._records).create(this.virtualTrackBy);
}
}
/**
* @hidden
* DOM WRITE
@ -632,7 +642,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
var stopAtHeight = (data.scrollTop + data.renderHeight);
processRecords(stopAtHeight, records, cells,
this._hdrFn, this._ftrFn, data);
this._hdrFn, this._ftrFn, data);
}
// ******** DOM READ ****************