OLD | NEW |
(Empty) | |
| 1 iron-list |
| 2 ======================== |
| 3 |
| 4 `iron-list` displays a virtual, *'infinite'* list. The template inside |
| 5 the iron-list element represents the DOM to create for each list item. |
| 6 The `items` property specifies an array of list item data. |
| 7 |
| 8 For performance reasons, not every item in the list is rendered at once; |
| 9 instead a small subset of actual template elements *(enough to fill the viewport
)* |
| 10 are rendered and reused as the user scrolls. As such, it is important that all |
| 11 state of the list template be bound to the model driving it, since the view may |
| 12 be reused with a new model at any time. Particularly, any state that may change |
| 13 as the result of a user interaction with the list item must be bound to the mode
l |
| 14 to avoid view state inconsistency. |
| 15 |
| 16 __Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling
to an |
| 17 explicitly sized parent. By "explicitly sized", we mean it either has an explici
t |
| 18 CSS `height` property set via a class or inline style, or else is sized by other |
| 19 layout means (e.g. the `flex` or `fit` classes). |
| 20 |
| 21 ### Template model |
| 22 |
| 23 List item templates should bind to template models of the following structure: |
| 24 |
| 25 ```js |
| 26 { |
| 27 index: 0, // data index for this item |
| 28 item: { // user data corresponding to items[index] |
| 29 /* user item data */ |
| 30 } |
| 31 } |
| 32 ``` |
| 33 |
| 34 Alternatively, you can change the property name used as data index by changing t
he |
| 35 `indexAs` property. The `as` property defines the name of the variable to add to
the binding |
| 36 scope for the array. |
| 37 |
| 38 For example, given the following `data` array: |
| 39 |
| 40 ##### data.json |
| 41 |
| 42 ```js |
| 43 [ |
| 44 {"name": "Bob"}, |
| 45 {"name": "Tim"}, |
| 46 {"name": "Mike"} |
| 47 ] |
| 48 ``` |
| 49 |
| 50 The following code would render the list (note the name and checked properties a
re |
| 51 bound from the model object provided to the template scope): |
| 52 |
| 53 ```html |
| 54 <template is="dom-bind"> |
| 55 <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax> |
| 56 <iron-list items="[[data]]" as="item"> |
| 57 <template> |
| 58 <div> |
| 59 Name: <span>[[item.name]]</span> |
| 60 </div> |
| 61 </template> |
| 62 </iron-list> |
| 63 </template> |
| 64 ``` |
OLD | NEW |