-
-
Notifications
You must be signed in to change notification settings - Fork 147
/
app.ts
108 lines (96 loc) · 3.01 KB
/
app.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import {startFPSMonitor, startMemMonitor} from 'perf-monitor';
import * as faker from 'faker';
import { customElement, IDOM, IteratorBindingInstruction, HydrateTemplateController, bindable, BindingStrategy, IController } from '@aurelia/runtime';
import { Subject, createElement, TextBindingInstruction } from '@aurelia/runtime-html';
import './app.scss'; // eslint-disable-line import/no-unassigned-import
import template from './app.html';
startFPSMonitor();
startMemMonitor();
function createItem() {
return {
name: faker.name.findName(),
phone: faker.phone.phoneNumber(),
country: faker.address.country()
};
}
@customElement({ name: 'app', template })
export class App {
public rows: any[];
public cols: string[];
public subject: Subject;
@bindable public keyedStrategy: boolean;
@bindable public proxyStrategy: boolean;
public $controller: IController<Node>;
public constructor() {
this.rows = [];
this.cols = ['name', 'phone', 'country'];
}
public created(): void {
this.$controller.host.textContent = '';
this.createSubject();
}
public create(count: number): void {
for (let i = 0; i < count; ++i) {
this.rows.push(createItem());
}
}
public clear(): void {
this.rows = [];
}
private createSubject(): void {
let strategy: BindingStrategy;
if (this.proxyStrategy) {
strategy |= BindingStrategy.proxies;
}
const dom = this.$controller.context.get<IDOM<Node>>(IDOM);
this.subject = createElement<Node>(
dom,
'table',
{
class: 'table is-fullwidth',
},
[
createElement<Node>(dom, 'thead', {}, [
createElement<Node>(dom, 'tr', {
$1: new HydrateTemplateController({
name: '',
template: '<th><au-m class="au"></au-m> </th>',
instructions: [[new TextBindingInstruction(`\${col | pascal}`)]],
strategy
},
'repeat',
[new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
)
})
]),
createElement<Node>(dom, 'tbody', {
$1: new HydrateTemplateController({
name: '',
template: '<tr><au-m class="au"></au-m></tr>',
instructions: [[new HydrateTemplateController({
name: '',
template: '<td><au-m class="au"></au-m> </td>',
instructions: [[new TextBindingInstruction(`\${row[col]}`)]],
strategy
},
'repeat',
[new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
)]]
},
'repeat',
[new IteratorBindingInstruction(this.keyedStrategy ? 'row of rows' : 'row of rows', 'items')]
)
})
]
);
}
protected keyedModeChanged(): void {
this.createSubject();
}
protected patchModeChanged(): void {
this.createSubject();
}
protected proxyModeChanged(): void {
this.createSubject();
}
}