OLD | NEW |
| (Empty) |
1 part of angular.directive; | |
2 | |
3 class _Row { | |
4 var id; | |
5 Scope scope; | |
6 Block block; | |
7 dom.Element startNode; | |
8 dom.Element endNode; | |
9 List<dom.Element> elements; | |
10 | |
11 _Row(this.id); | |
12 } | |
13 | |
14 /** | |
15 * The `ngRepeat` directive instantiates a template once per item from a | |
16 * collection. Each template instance gets its own scope, where the given loop | |
17 * variable is set to the current collection item, and `$index` is set to the | |
18 * item index or key. | |
19 * | |
20 * Special properties are exposed on the local scope of each template instance, | |
21 * including: | |
22 * | |
23 * <table> | |
24 * <tr><th> Variable </th><th> Type </th><th> Details
<th></tr> | |
25 * <tr><td> `$index` </td><td>[num] </td><td> iterator offset of the repeated e
lement (0..length-1) <td></tr> | |
26 * <tr><td> `$first` </td><td>[bool]</td><td> true if the repeated element is f
irst in the iterator. <td></tr> | |
27 * <tr><td> `$middle` </td><td>[bool]</td><td> true if the repeated element is b
etween the first and last in the iterator. <td></tr> | |
28 * <tr><td> `$last` </td><td>[bool]</td><td> true if the repeated element is l
ast in the iterator. <td></tr> | |
29 * <tr><td> `$even` </td><td>[bool]</td><td> true if the iterator position `$i
ndex` is even (otherwise false). <td></tr> | |
30 * <tr><td> `$odd` </td><td>[bool]</td><td> true if the iterator position `$i
ndex` is odd (otherwise false). <td></tr> | |
31 * </table> | |
32 * | |
33 * | |
34 * [repeat_expression] ngRepeat The expression indicating how to enumerate a | |
35 * collection. These formats are currently supported: | |
36 * | |
37 * * `variable in expression` – where variable is the user defined loop | |
38 * variable and `expression` is a scope expression giving the collection to | |
39 * enumerate. | |
40 * | |
41 * For example: `album in artist.albums`. | |
42 * | |
43 * * `variable in expression track by tracking_expression` – You can also | |
44 * provide an optional tracking function which can be used to associate the | |
45 * objects in the collection with the DOM elements. If no tracking function is | |
46 * specified the ng-repeat associates elements by identity in the collection. | |
47 * It is an error to have more than one tracking function to resolve to the | |
48 * same key. (This would mean that two distinct objects are mapped to the same | |
49 * DOM element, which is not possible.) Filters should be applied to the | |
50 * expression, before specifying a tracking expression. | |
51 * | |
52 * For example: `item in items` is equivalent to `item in items track by | |
53 * $id(item)`. This implies that the DOM elements will be associated by item | |
54 * identity in the array. | |
55 * | |
56 * For example: `item in items track by $id(item)`. A built in `$id()` | |
57 * function can be used to assign a unique `$$hashKey` property to each item | |
58 * in the array. This property is then used as a key to associated DOM | |
59 * elements with the corresponding item in the array by identity. Moving the | |
60 * same object in array would move the DOM element in the same way ian the | |
61 * DOM. | |
62 * | |
63 * For example: `item in items track by item.id` is a typical pattern when | |
64 * the items come from the database. In this case the object identity does | |
65 * not matter. Two objects are considered equivalent as long as their `id` | |
66 * property is same. | |
67 * | |
68 * For example: `item in items | filter:searchText track by item.id` is a | |
69 * pattern that might be used to apply a filter to items in conjunction with | |
70 * a tracking expression. | |
71 * | |
72 * # Example: | |
73 * | |
74 * <ul> | |
75 * <li ng-repeat="item in ['foo', 'bar', 'baz']">{{item}}</li> | |
76 * </ul> | |
77 */ | |
78 | |
79 @NgDirective( | |
80 children: NgAnnotation.TRANSCLUDE_CHILDREN, | |
81 selector: '[ng-repeat]', | |
82 map: const {'.': '@expression'}) | |
83 class NgRepeatDirective extends AbstractNgRepeatDirective { | |
84 NgRepeatDirective(BlockHole blockHole, | |
85 BoundBlockFactory boundBlockFactory, | |
86 Scope scope, | |
87 Parser parser, | |
88 AstParser astParser) | |
89 : super(blockHole, boundBlockFactory, scope, parser, astParser); | |
90 } | |
91 | |
92 /** | |
93 * *EXPERIMENTAL:* This feature is experimental. We reserve the right to change | |
94 * or delete it. | |
95 * | |
96 * [ng-shallow-repeat] is same as [ng-repeat] with some tradeoffs designed for | |
97 * speed. Use [ng-shallow-repeat] when you expect that your items you are | |
98 * repeating over do not change during the repeater lifetime. | |
99 * | |
100 * The shallow repeater introduces these changes: | |
101 * | |
102 * * The repeater only fires if the identity of the list changes or if the list | |
103 * [length] property changes. This means that the repeater will still see | |
104 * additions and deletions but not changes to the array. | |
105 * * The child scopes for each item are created in the lazy mode | |
106 * (see [Scope.$new]). This means the scopes are effectively taken out of the | |
107 * digest cycle and will not update on changes to the model. | |
108 * | |
109 */ | |
110 @deprecated | |
111 @NgDirective( | |
112 children: NgAnnotation.TRANSCLUDE_CHILDREN, | |
113 selector: '[ng-shallow-repeat]', | |
114 map: const {'.': '@expression'}) | |
115 //TODO(misko): delete me, since we can no longer do shallow digest. | |
116 class NgShallowRepeatDirective extends AbstractNgRepeatDirective { | |
117 NgShallowRepeatDirective(BlockHole blockHole, | |
118 BoundBlockFactory boundBlockFactory, | |
119 Scope scope, | |
120 Parser parser, | |
121 AstParser astParser) | |
122 : super(blockHole, boundBlockFactory, scope, parser, astParser) | |
123 { | |
124 print('DEPRECATED: [ng-shallow-repeat] use [ng-repeat]'); | |
125 } | |
126 } | |
127 | |
128 abstract class AbstractNgRepeatDirective { | |
129 static RegExp _SYNTAX = new RegExp(r'^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+
(.+)\s*)?(\s+lazily\s*)?$'); | |
130 static RegExp _LHS_SYNTAX = new RegExp(r'^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\
w]+)\))$'); | |
131 | |
132 final BlockHole _blockHole; | |
133 final BoundBlockFactory _boundBlockFactory; | |
134 final Scope _scope; | |
135 final Parser _parser; | |
136 final AstParser _astParser; | |
137 | |
138 String _expression; | |
139 String _valueIdentifier; | |
140 String _keyIdentifier; | |
141 String _listExpr; | |
142 Map<dynamic, _Row> _rows = {}; | |
143 Function _trackByIdFn = (key, value, index) => value; | |
144 Watch _watch = null; | |
145 Iterable _lastCollection; | |
146 | |
147 AbstractNgRepeatDirective(this._blockHole, this._boundBlockFactory, | |
148 this._scope, this._parser, this._astParser); | |
149 | |
150 set expression(value) { | |
151 _expression = value; | |
152 if (_watch != null) _watch.remove(); | |
153 Match match = _SYNTAX.firstMatch(_expression); | |
154 if (match == null) { | |
155 throw "[NgErr7] ngRepeat error! Expected expression in form of '_item_ " | |
156 "in _collection_[ track by _id_]' but got '$_expression'."; | |
157 } | |
158 _listExpr = match.group(2); | |
159 var trackByExpr = match.group(4); | |
160 if (trackByExpr != null) { | |
161 Expression trackBy = _parser(trackByExpr); | |
162 _trackByIdFn = ((key, value, index) { | |
163 final trackByLocals = <String, Object>{}; | |
164 if (_keyIdentifier != null) trackByLocals[_keyIdentifier] = key; | |
165 trackByLocals | |
166 ..[_valueIdentifier] = value | |
167 ..[r'$index'] = index | |
168 ..[r'$id'] = (obj) => obj; | |
169 return relaxFnArgs(trackBy.eval)(new ScopeLocals(_scope.context, trackBy
Locals)); | |
170 }); | |
171 } | |
172 var assignExpr = match.group(1); | |
173 match = _LHS_SYNTAX.firstMatch(assignExpr); | |
174 if (match == null) { | |
175 throw "[NgErr8] ngRepeat error! '_item_' in '_item_ in _collection_' " | |
176 "should be an identifier or '(_key_, _value_)' expression, but got " | |
177 "'$assignExpr'."; | |
178 } | |
179 _valueIdentifier = match.group(3); | |
180 if (_valueIdentifier == null) _valueIdentifier = match.group(1); | |
181 _keyIdentifier = match.group(2); | |
182 | |
183 _watch = _scope.watch( | |
184 _astParser(_listExpr, collection: true), | |
185 (CollectionChangeRecord collection, _) { | |
186 //TODO(misko): we should take advantage of the CollectionChangeRecord! | |
187 _onCollectionChange(collection == null ? [] : collection.iterable); | |
188 } | |
189 ); | |
190 } | |
191 | |
192 List<_Row> _computeNewRows(Iterable collection, trackById) { | |
193 final newRowOrder = new List<_Row>(collection.length); | |
194 // Same as lastBlockMap but it has the current state. It will become the | |
195 // lastBlockMap on the next iteration. | |
196 final newRows = <dynamic, _Row>{}; | |
197 // locate existing items | |
198 for (var index = 0; index < newRowOrder.length; index++) { | |
199 var value = collection.elementAt(index); | |
200 trackById = _trackByIdFn(index, value, index); | |
201 if (_rows.containsKey(trackById)) { | |
202 var row = _rows[trackById]; | |
203 _rows.remove(trackById); | |
204 newRows[trackById] = row; | |
205 newRowOrder[index] = row; | |
206 } else if (newRows.containsKey(trackById)) { | |
207 // restore lastBlockMap | |
208 newRowOrder.forEach((row) { | |
209 if (row != null && row.startNode != null) _rows[row.id] = row; | |
210 }); | |
211 // This is a duplicate and we need to throw an error | |
212 throw "[NgErr50] ngRepeat error! Duplicates in a repeater are not " | |
213 "allowed. Use 'track by' expression to specify unique keys. " | |
214 "Repeater: $_expression, Duplicate key: $trackById"; | |
215 } else { | |
216 // new never before seen row | |
217 newRowOrder[index] = new _Row(trackById); | |
218 newRows[trackById] = null; | |
219 } | |
220 } | |
221 // remove existing items | |
222 _rows.forEach((key, row) { | |
223 row.block.remove(); | |
224 row.scope.destroy(); | |
225 }); | |
226 _rows = newRows; | |
227 return newRowOrder; | |
228 } | |
229 | |
230 _onCollectionChange(Iterable collection) { | |
231 dom.Node previousNode = _blockHole.elements[0]; // current position of the n
ode | |
232 dom.Node nextNode; | |
233 Scope childScope; | |
234 Map childContext; | |
235 Scope trackById; | |
236 ElementWrapper cursor = _blockHole; | |
237 | |
238 List<_Row> newRowOrder = _computeNewRows(collection, trackById); | |
239 | |
240 for (var index = 0; index < collection.length; index++) { | |
241 var value = collection.elementAt(index); | |
242 _Row row = newRowOrder[index]; | |
243 | |
244 if (row.startNode != null) { | |
245 // if we have already seen this object, then we need to reuse the | |
246 // associated scope/element | |
247 childScope = row.scope; | |
248 childContext = childScope.context as Map; | |
249 | |
250 nextNode = previousNode; | |
251 do { | |
252 nextNode = nextNode.nextNode; | |
253 } while(nextNode != null); | |
254 | |
255 // existing item which got moved | |
256 if (row.startNode != nextNode) row.block.moveAfter(cursor); | |
257 previousNode = row.endNode; | |
258 } else { | |
259 // new item which we don't know about | |
260 childScope = _scope.createChild(childContext = new PrototypeMap(_scope.c
ontext)); | |
261 } | |
262 | |
263 if (!identical(childScope.context[_valueIdentifier], value)) { | |
264 childContext[_valueIdentifier] = value; | |
265 } | |
266 var first = (index == 0); | |
267 var last = (index == collection.length - 1); | |
268 childContext | |
269 ..[r'$index'] = index | |
270 ..[r'$first'] = first | |
271 ..[r'$last'] = last | |
272 ..[r'$middle'] = !first && !last | |
273 ..[r'$odd'] = index & 1 == 1 | |
274 ..[r'$even'] = index & 1 == 0; | |
275 | |
276 if (row.startNode == null) { | |
277 var block = _boundBlockFactory(childScope); | |
278 _rows[row.id] = row | |
279 ..block = block | |
280 ..scope = childScope | |
281 ..elements = block.elements | |
282 ..startNode = row.elements[0] | |
283 ..endNode = row.elements[row.elements.length - 1]; | |
284 block.insertAfter(cursor); | |
285 } | |
286 cursor = row.block; | |
287 } | |
288 } | |
289 } | |
OLD | NEW |