zackd/pure-js_directives_tutorial.html

## pure-js_directives_tutorial.html
<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>
	<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>