Skip to content

Commit cc6ac5b

Browse files
committed
Merge pull request dart-archive#15 from dart-lang/looping-over-collection
Updating the README for looping-over-a-collection-using-iterative-templa...
2 parents 3359bbe + 370d264 commit cc6ac5b

File tree

1 file changed

+33
-1
lines changed
  • web/control_flow/looping_over_a_collection_using_iterative_templates

1 file changed

+33
-1
lines changed
Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
11
# Looping over a collection using iterative templates
22

3-
Ports https://github.com/PolymerLabs/polymer-snippets/blob/e2961966bf294374d99df4ddaba296f45af7bd38/snippets/control-flow/looping-over-a-collection-using-iterative-templates.html
3+
Shows iterating over a list of items using **template repeat**.
4+
5+
## The code
6+
7+
* [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.dart):
8+
The Dart code for `<my-element>`
9+
* [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.html):
10+
The HTML code for `<my-element>`
11+
* [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/index.html):
12+
An HTML file that uses `<my-element>`
13+
14+
## How it works
15+
16+
The MyElement class (`my_element.dart`) defines a list of fruits:
17+
18+
final List<String> fruits = toObservable(
19+
['apple', 'banana', 'fig', 'kiwi', 'guava']);
20+
21+
When a list is created using `toObservable`, the UI elements bound to the
22+
list are updated when the list or its elements are modifed.
23+
24+
In the template code (`my_element.html`), `template repeat` iterates
25+
over the list of fruit, rendering each with a template:
26+
27+
<template repeat="{{fruit in fruits}}">
28+
<div>{{fruit}}</div>
29+
</template>
30+
31+
## More information
32+
33+
* [looping_over_a_collection_using_iterative_templates](https://github.com/PolymerLabs/polymer-snippets/blob/e2961966bf294374d99df4ddaba296f45af7bd38/snippets/control-flow/looping-over-a-collection-using-iterative-templates.html):
34+
The JavaScript version of this example
35+

0 commit comments

Comments
 (0)