Skip to content

Instantly share code, notes, and snippets.

@fernandocanizo

fernandocanizo/not-working-hyperhtml-component

Created March 2, 2020 21:56
Show Gist options
  • Save fernandocanizo/e0552f239b24e275aa97ed91bb68ceca to your computer and use it in GitHub Desktop.
Save fernandocanizo/e0552f239b24e275aa97ed91bb68ceca to your computer and use it in GitHub Desktop.
Download ZIP
Non working hyperhtml component
Raw
not-working-hyperhtml-component
// sample code taken from
// https://medium.com/easy-apps-with-hyperhtml/easy-apps-with-hyperhtml-2-1d60fd41bb67
// under "Components" subtitle
import hyperHTML from 'https://unpkg.com/hyperhtml?module';
const Table = {
html: hyperHTML.bind(document.getElementById('table')),
data: [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 },
{ label: 'three', value: 3 }
],
state: {
sorted: ''
},
handleEvent(e) {
// stop the regular link behaviour
e.preventDefault();
// get the current link
const link = e.target;
// read the attribute data-target, this will tell us how to sort the
// array
const attr = link.dataset.target;
//check if the user clicked on the same attr
let asc = this.state.sorted === attr;
// simple sort, reverse the sort if asc is true
this.data.sort((a, b) =>
(''+a[attr]).localeCompare(''+b[attr]) * (asc ? 1 : -1));
// update the sorted attr
this.state.sorted = asc ? '' : attr;
// re-render
this.render();
},
render() {
return hyperHTML`
<table>
<thead>
<tr>
<th><a onclick="${this}" data-target="label" href="#">Label</a></th>
<th><a onclick="${this}" data-target="value" href="#">Value</a></th>
</tr>
</thead>
<tbody>
${this.data.map(o =>
hyperHTML.wire(o)`<tr><td>${o.label}</td><td>${o.value}</td></tr>`)}
</tbody>
</table>
`;
}
};
Table.render();
@fernandocanizo
Copy link
Author

Initial HTML sent is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="/css/style.css" rel="stylesheet">
    <title>Hyperhtml Components</title>
  </head>
  <body>
    <div id="table"></div>
  </body>
  <script type="module" src="/js/index.js"></script>
</html>

After loading this, nothing happens.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment