javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +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); 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> <button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
</div> </div>
<ion-list [virtualScroll]="items"
[headerFn]="headerFn"> <ion-list [virtualScroll]="items" [headerFn]="headerFn" [virtualTrackBy]="trackByFn"
approxItemHeight="46px">
<ion-item-divider *virtualHeader="let header"> <ion-item-divider *virtualHeader="let header">
Header: {{header}} Header: {{ header }}
</ion-item-divider> </ion-item-divider>
<ion-item *virtualItem="let item"> <ion-item *virtualItem="let item">
Item: {{item.value}} {{item.someMethod()}} Item: {{ item.value }} {{ item.someMethod() }}
</ion-item> </ion-item>
</ion-list> </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; _queue: number = SCROLL_QUEUE_NO_CHANGES;
_recordSize: number = 0; _recordSize: number = 0;
_virtualTrackBy: TrackByFn;
@ContentChild(VirtualItem) _itmTmp: VirtualItem; @ContentChild(VirtualItem) _itmTmp: VirtualItem;
@ContentChild(VirtualHeader) _hdrTmp: VirtualHeader; @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
@ -249,9 +250,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
@Input() @Input()
set virtualScroll(val: any) { set virtualScroll(val: any) {
this._records = val; this._records = val;
if (isBlank(this._differ) && isPresent(val)) { this._updateDiffer();
this._differ = this._iterableDiffers.find(val).create(this.virtualTrackBy);
}
} }
/** /**
@ -368,7 +367,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
/** /**
* @input {function} Same as `ngForTrackBy` which can be used on `ngFor`. * @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( constructor(
@ -481,6 +485,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
return null; return null;
} }
private _updateDiffer(): void {
if (isBlank(this._differ) && isPresent(this._records)) {
this._differ = this._iterableDiffers.find(this._records).create(this.virtualTrackBy);
}
}
/** /**
* @hidden * @hidden
* DOM WRITE * DOM WRITE
@ -632,7 +642,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
var stopAtHeight = (data.scrollTop + data.renderHeight); var stopAtHeight = (data.scrollTop + data.renderHeight);
processRecords(stopAtHeight, records, cells, processRecords(stopAtHeight, records, cells,
this._hdrFn, this._ftrFn, data); this._hdrFn, this._ftrFn, data);
} }
// ******** DOM READ **************** // ******** DOM READ ****************