Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d92c71a

Browse files
author
Nedyalko Nikolov
committed
Added setupItemView event for Angular ListView.
1 parent d45b8f9 commit d92c71a

File tree

2 files changed

+86
-4
lines changed

2 files changed

+86
-4
lines changed

‎src/nativescript-angular/directives/list-view-comp.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import {
99
HostListener,
1010
IterableDiffers,
1111
IterableDiffer,
12-
ChangeDetectorRef} from 'angular2/core';
12+
ChangeDetectorRef,
13+
EventEmitter,
14+
Output} from 'angular2/core';
15+
import {isListLikeIterable} from 'angular2/src/facade/collection';
1316
import {Observable as RxObservable} from 'rxjs'
1417
import {ListView} from 'ui/list-view';
1518
import {View} from 'ui/core/view';
@@ -18,6 +21,12 @@ import {ObservableArray} from 'data/observable-array';
1821
import {LayoutBase} from 'ui/layouts/layout-base';
1922
const NG_VIEW = "_ngViewRef";
2023

24+
interface SetupItemViewArgs {
25+
view: EmbeddedViewRef;
26+
data: any;
27+
index: number;
28+
}
29+
2130
@Component({
2231
selector: 'ListView',
2332
template: ``,
@@ -28,6 +37,8 @@ export class ListViewComponent {
2837
private _items: any;
2938
private _differ: IterableDiffer;
3039

40+
@Output() public setupItemView: EventEmitter<SetupItemViewArgs> = new EventEmitter<SetupItemViewArgs>();
41+
3142
@ContentChild(TemplateRef) itemTemplate: TemplateRef;
3243

3344
set items(value: any) {
@@ -36,7 +47,7 @@ export class ListViewComponent {
3647
if (value instanceof ObservableArray) {
3748
needDiffer = false;
3849
}
39-
if (needDiffer && !this._differ && value) {
50+
if (needDiffer && !this._differ && isListLikeIterable(value)) {
4051
this._differ = this._iterableDiffers.find(this._items).create(this._cdr, (index, item) => { return item;});
4152
}
4253
this.listView.items = this._items;
@@ -45,8 +56,8 @@ export class ListViewComponent {
4556
private timerId: number;
4657
private doCheckDelay = 5;
4758

48-
constructor(private _elementRef: ElementRef,
49-
private _iterableDiffers: IterableDiffers,
59+
constructor(private _elementRef: ElementRef,
60+
private _iterableDiffers: IterableDiffers,
5061
private _cdr: ChangeDetectorRef,
5162
private _appViewManager: AppViewManager) {
5263
this.listView = _elementRef.nativeElement;
@@ -82,6 +93,7 @@ export class ListViewComponent {
8293
viewRef.setLocal("index", index);
8394
viewRef.setLocal('even', (index % 2 == 0));
8495
viewRef.setLocal('odd', (index % 2 == 1));
96+
this.setupItemView.next({'view': viewRef, 'data': data, 'index': index});
8597
}
8698

8799
ngDoCheck() {

‎tests/app/tests/list-view-tests.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {assert} from "./test-config";
2+
import {
3+
ElementRef,
4+
Component
5+
} from 'angular2/core';
6+
import {TestApp} from "./test-app";
7+
8+
class DataItem {
9+
constructor(public id: number, public name: string) { }
10+
}
11+
12+
@Component({
13+
selector: 'list-view-setupItemView',
14+
template: `
15+
<StackLayout>
16+
<ListView height="200" [items]="myItems" (setupItemView)="onSetupItemView($event)">
17+
<template #item="item" #i="index" #odd="odd" #even="even">
18+
<StackLayout [class.odd]="odd" [class.even]="even">
19+
<Label [text]='"index: " + i'></Label>
20+
<Label [text]='"[" + item.id +"] " + item.name'></Label>
21+
</StackLayout>
22+
</template>
23+
</ListView>
24+
</StackLayout>
25+
`
26+
})
27+
export class TestListViewComponent {
28+
public myItems: Array<DataItem>;
29+
public counter: number;
30+
31+
constructor(public elementRef: ElementRef) {
32+
this.counter = 0;
33+
this.myItems = [];
34+
for (var i = 0; i < 2; i++) {
35+
this.myItems.push(new DataItem(i, "data item " + i));
36+
}
37+
}
38+
39+
onSetupItemView(args) {
40+
this.counter++;
41+
}
42+
}
43+
44+
describe.only('ListView-tests', () => {
45+
let testApp: TestApp = null;
46+
47+
before(() => {
48+
return TestApp.create().then((app) => {
49+
testApp = app;
50+
})
51+
});
52+
53+
after(() => {
54+
testApp.dispose();
55+
});
56+
57+
afterEach(() => {
58+
testApp.disposeComponents();
59+
});
60+
61+
it('setupItemView is called for every item', (done) => {
62+
return testApp.loadComponent(TestListViewComponent).then((componentRef) => {
63+
const component = componentRef.instance;
64+
setTimeout(() => {
65+
assert.equal(component.counter, 2);
66+
done();
67+
}, 100);
68+
});
69+
});
70+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /