-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
Copy patheach.js
104 lines (81 loc) · 2.92 KB
/
each.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
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
import normalizeSelf from "ember-htmlbars/utils/normalize-self";
import shouldDisplay from "ember-views/streams/should_display";
import decodeEachKey from "ember-htmlbars/utils/decode-each-key";
/**
The `{{#each}}` helper loops over elements in a collection. It is an extension
of the base Handlebars `{{#each}}` helper.
The default behavior of `{{#each}}` is to yield its inner block once for every
item in an array.
```javascript
var developers = [{name: 'Yehuda'},{name: 'Tom'}, {name: 'Paul'}];
```
```handlebars
{{#each developers key="name" as |person|}}
{{person.name}}
{{! `this` is whatever it was outside the #each }}
{{/each}}
```
The same rules apply to arrays of primitives.
```javascript
var developerNames = ['Yehuda', 'Tom', 'Paul']
```
```handlebars
{{#each developerNames key="@index" as |name|}}
{{name}}
{{/each}}
```
### Specifying Keys
The `key` option is used to tell Ember how to determine if the array being
iterated over with `{{#each}}` has changed between renders. By helping Ember
detect that some elements in the array are the same, DOM elements can be
re-used, significantly improving rendering speed.
For example, here's the `{{#each}}` helper with its `key` set to `id`:
```handlebars
{{#each model key="id" as |item|}}
{{/each}}
```
When this `{{#each}}` re-renders, Ember will match up the previously rendered
items (and reorder the generated DOM elements) based on each item's `id`
property.
There are a few special values for `key`:
* `@index` - The index of the item in the array.
* `@item` - The item in the array itself. This can only be used for arrays of strings
or numbers.
* `@guid` - Generate a unique identifier for each object (uses `Ember.guidFor`).
### {{else}} condition
`{{#each}}` can have a matching `{{else}}`. The contents of this block will render
if the collection is empty.
```handlebars
{{#each developers as |person|}}
{{person.name}}
{{else}}
<p>Sorry, nobody is available for this task.</p>
{{/each}}
```
@method each
@for Ember.Handlebars.helpers
@public
*/
export default function eachHelper(params, hash, blocks) {
var list = params[0];
var keyPath = hash.key;
if (blocks.template.arity === 0) {
Ember.deprecate(deprecation);
}
if (shouldDisplay(list)) {
forEach(list, (item, i) => {
var self;
if (blocks.template.arity === 0) {
self = normalizeSelf(item);
}
var key = decodeEachKey(item, keyPath, i);
blocks.template.yieldItem(key, [item, i], self);
});
} else if (blocks.inverse.yield) {
blocks.inverse.yield();
}
}
function forEach(iterable, cb) {
return iterable.forEach ? iterable.forEach(cb) : Array.prototype.forEach.call(iterable, cb);
}
export var deprecation = "Using the context switching form of {{each}} is deprecated. Please use the keyword form (`{{#each items as |item|}}`) instead.";