Skip to content

Instantly share code, notes, and snippets.

@zackd
Created September 22, 2010 18:23
Show Gist options
  • Save zackd/592213 to your computer and use it in GitHub Desktop.
Save zackd/592213 to your computer and use it in GitHub Desktop.
<html>
<head>
<!--
just download PURE and drop this file the 'tutorial' directory
- http://beebole.com/pure/
-->
<title>PURE Unobtrusive Rendering Engine</title>
<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
<style>
ul {list-style: none; padding: 0px 0px 0px 15px;}
li.music {background: #eee; margin-bottom: 10px; padding: 10px;}
</style>
</head>
<body>
<!-- HTML template -->
<ul>
<li class="music">
<ul>
<li>Album: <a class="release" href="#"></a></li>
<li>Artist: <a class="artist" href="#"></a></li>
<li>ID: <a class="label" href="#"></a></li>
<li>Tracks:
<ul>
<li class="track">
<span class="trackNum">:</span>
<span class="title"></span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var directive = {
'li.music': {
'obj<-items': { // "for obj in items"
'a.release': 'obj.title',
'a.artist': 'obj.artist',
'a.label': 'obj.id',
'li.track': {
'track<-obj.tracks': { // "for track in obj.tracks"
'+.trackNum': 'track.trackNumber', // prepend
'.title': 'track.title'
}
}
}
}
};
var data = {
"items": [
{
"id": 1,
"title": "Mars Attack",
"artist": "Epos",
"tracks": [
{
"title": "Epos 1",
"trackNumber": "1"
},
{
"title": "Epos 2",
"trackNumber": "2"
},
{
"title": "Epos 3",
"trackNumber": "3"
}
]
},
{
"id": 2,
"title": "Reigni",
"artist": "Alfu",
"tracks": [
{
"title": "Alfu 1",
"trackNumber": "1"
},
{
"title": "Alfu 2",
"trackNumber": "2"
},
{
"title": "Alfu 3",
"trackNumber": "3"
}
]
},
]
};
$('ul').render(data, directive);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment