Created
September 5, 2014 07:22
-
-
Save pa6lo/1c9a0f3fb57ea4704cf6 to your computer and use it in GitHub Desktop.
Polymer <template> repeat example 1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| Polymer <template> repeat example | |
| - pass in array of objects through custom element attribute | |
| <person-list persons="[{'name': 'Eric'}, {'name': 'Bob'}]"></person-list> | |
| --> | |
| <html> | |
| <head> | |
| <script src="/polymer/components/platform/platform.js"></script> | |
| <link rel="import" href="/polymer/components/polymer/polymer.html"> | |
| </head> | |
| <body> | |
| <div> | |
| <person-list persons="[{'name': 'Eric'}, {'name': 'Bob'}]"></person-list> | |
| </div> | |
| <polymer-element name="person-list" attributes="persons"> | |
| <template> | |
| <template repeat="{{ person in persons }}"> | |
| <div>{{ person.name }}</div> | |
| </template> | |
| </template> | |
| <script> | |
| Polymer('person-list', { | |
| created:function() { | |
| this.persons = []; | |
| } | |
| }); | |
| </script> | |
| </polymer-element> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment