UNPKG

2.1 kBTypeScriptView Raw
1declare const _default: object;
2/**
3 Dynamically look up a property on an object. The second argument to `{{get}}`
4 should have a string value, although it can be bound.
5
6 For example, these two usages are equivalent:
7
8 ```app/components/developer-detail.js
9 import Component from '@glimmer/component';
10 import { tracked } from '@glimmer/tracking';
11
12 export default class extends Component {
13 @tracked developer = {
14 name: "Sandi Metz",
15 language: "Ruby"
16 }
17 }
18 ```
19
20 ```handlebars
21 {{this.developer.name}}
22 {{get this.developer "name"}}
23 ```
24
25 If there were several facts about a person, the `{{get}}` helper can dynamically
26 pick one:
27
28 ```app/templates/application.hbs
29 <DeveloperDetail @factName="language" />
30 ```
31
32 ```handlebars
33 {{get this.developer @factName}}
34 ```
35
36 For a more complex example, this template would allow the user to switch
37 between showing the user's height and weight with a click:
38
39 ```app/components/developer-detail.js
40 import Component from '@glimmer/component';
41 import { tracked } from '@glimmer/tracking';
42
43 export default class extends Component {
44 @tracked developer = {
45 name: "Sandi Metz",
46 language: "Ruby"
47 }
48
49 @tracked currentFact = 'name'
50
51 showFact = (fact) => {
52 this.currentFact = fact;
53 }
54 }
55 ```
56
57 ```app/components/developer-detail.js
58 {{get this.developer this.currentFact}}
59
60 <button {{on 'click' (fn this.showFact "name")}}>Show name</button>
61 <button {{on 'click' (fn this.showFact "language")}}>Show language</button>
62 ```
63
64 The `{{get}}` helper can also respect mutable values itself. For example:
65
66 ```app/components/developer-detail.js
67 <Input @value={{mut (get this.person this.currentFact)}} />
68
69 <button {{on 'click' (fn this.showFact "name")}}>Show name</button>
70 <button {{on 'click' (fn this.showFact "language")}}>Show language</button>
71 ```
72
73 Would allow the user to swap what fact is being displayed, and also edit
74 that fact via a two-way mutable binding.
75
76 @public
77 @method get
78 */
79export default _default;
80//# sourceMappingURL=get.d.ts.map
\No newline at end of file