-
Notifications
You must be signed in to change notification settings - Fork 18
/
01-computed-properties.js
53 lines (42 loc) · 1.43 KB
/
01-computed-properties.js
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
import { LitElement, html } from '@polymer/lit-element';
class ComputedProps extends LitElement {
static get properties() {
return {
itemsA: { type: Array },
itemsB: { type: Array },
amountA: { type: Number },
amountB: { type: Number },
};
}
constructor() {
super();
this.itemsA = ['hello', 'world'];
this.itemsB = ['foo', 'bar'];
this.amountA = 1;
this.amountB = 2;
}
// If you are exposing a public property that is computed based on two properties, you can
// just create a getter that combines the two.
get totalAmount() {
return this.amountA + this.amountB;
}
render() {
// With Polymer template, we had to set up special bindings for properties that
// combine to create new values so that the template system picks up the changes.
//
// With LitElement, we can just compute the combined properties inside the render
// callback.
//
// Remember, it's all plain javascript so you can use whatever method suits you best.
const items = this._computeItems(this.itemsA, this.itemsB);
return html`
<div>The computed messages are: [${items.join(', ')}]</div>
<!-- For simple computed properties, you can just compute them inline -->
<div>The computed amount is: [${this.amountA + this.amountB}]</div>
`;
}
_computeItems(a, b) {
return [...a, ...b];
}
}
customElements.define('x-computed-properties', ComputedProps);