Created
November 2, 2018 09:42
-
-
Save newbornfrontender/fa587076f3e4e3032d4938d2a7fb3ad8 to your computer and use it in GitHub Desktop.
Lit-html (repeat directive)
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> | |
| <html dir="ltr" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Lit HTML</title> | |
| </head> | |
| <body> | |
| <script type="module" src="/index.js"></script> | |
| </body> | |
| </html> |
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
| import { html, render } from './node_modules/lit-html/lit-html.js'; | |
| import { repeat } from './node_modules/lit-html/directives/repeat.js'; | |
| const items = [{ | |
| title: 'Home', | |
| link: '/', | |
| }, { | |
| title: 'About', | |
| link: '/about', | |
| }, { | |
| title: 'Price', | |
| link: '/price', | |
| }]; | |
| const list = () => html` | |
| <ul> | |
| ${repeat(items, (item) => item.id, ({link, title}, index) => html` | |
| <li> | |
| <a href="${link}"> | |
| ${index + 1} - ${title} | |
| </a> | |
| </li> | |
| `)} | |
| </ul> | |
| `; | |
| render(list(), document.body); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment