xxxxxxxxxx
<html>
<head>
<title>riotjs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<albums></albums>
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<script type="riot/tag">
<albums>
<div class="album" each="{ opts.data }" style="background-image: url({ image });">
<div class="album-meta">
<div class="album-name">{ album }</div>
<div class="album-artist">{ artist }</div>
</div>
<a class="album-play" href="https://open.spotify.com/album/{ spotify }" target="_blank"></a>
</div>
</albums>
</script>
<script>
var x = new XMLHttpRequest();
x.onreadystatechange = function () {
if (x.readyState === 4 && x.status === 200) {
riot.mount('albums', JSON.parse(x.responseText));
} else {
// server error
}
};
x.onerror = function () {
// network error
};
x.open('GET', 'https://rawgit.com/mattborn/data/master/metalcore.json', true);
x.send(null);
</script>
</body>
</html>
https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js