Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added Zack's tutorial on nested loops

  • Loading branch information...
commit 68a9c47bbf3c1180d992fc8efb47a20a7a513938 1 parent ce5c264
@pure authored
Showing with 120 additions and 1 deletion.
  1. +4 −0 index.css
  2. +19 −1 index.html
  3. +97 −0 tutorial/tuto5d.html
View
4 index.css
@@ -1,3 +1,7 @@
+body{
+ font-family:"verdana", "helvetica", "arial";
+}
+
.exampleList{margin:0; padding:0; list-style-type:none;}
h3{margin:1em 0 .3em;float:left;clear:both;}
View
20 index.html
@@ -27,7 +27,25 @@
<a class="lib" href="javascript:void(0)" onclick="loadLib('sizzle');">Sizzle</a>
<a class="lib" href="javascript:void(0)" onclick="loadLib('sly');">Sly</a> -
<a class="lib" href="javascript:void(0)" onclick="loadLib('pure');">PURE Alone (modern browsers only)</a>
- <p>Or look at the source code of the tutorials:<br/><a href="tutorial/tuto1.html">Tuto 1</a> <a href="tutorial/tuto2.html">Tuto 2</a> <a href="tutorial/tuto3.html">Tuto 3</a> <a href="tutorial/tuto4.html">Tuto 4</a> <a href="tutorial/tuto5.html">Tuto 5</a> <a href="tutorial/tuto5b.html">Tuto 5b</a> <a href="tutorial/tuto6.html">Tuto 6</a> <a href="tutorial/tuto7.html">Tuto 7</a> </p>
+ <p>Or look at the source code of the tutorials:<br/>
+ <ul>
+ <li>Automatic rendering(autoRender):
+ <ul>
+ <li><a href="tutorial/tuto1.html">Set the value of an HTML node</a>
+ <li><a href="tutorial/tuto2.html">Set the value to an HTML attribute</a>
+ <li><a href="tutorial/tuto3.html">Repeat a HTML node (loop)</a>
+ </ul>
+ <li>Render with directives:
+ <ul>
+ <li><a href="tutorial/tuto4.html">Set the value of an HTML node and attribute</a>
+ <li><a href="tutorial/tuto5.html">Repeat an HTML node (loop)</a>
+ <li><a href="tutorial/tuto5b.html">Use sort and filter on loops</a>
+ <li><a href="tutorial/tuto5c.html">Chaining multiple rendering</a>
+ <li><a href="tutorial/tuto5d.html">Nested loops</a>
+ <li><a href="tutorial/tuto6.html">Using function as directive for more complex needs</a>
+ <li><a href="tutorial/tuto8.html">Recursion example</a>
+ <li><a href="tutorial/tuto7.html">Extend PURE with a plugin. Here an post rendering animation.</a> </p>
+ </ul>
</div>
<div id="examples">
View
97 tutorial/tuto5d.html
@@ -0,0 +1,97 @@
+<html>
+<head>
+ <!-- Thanks to zackdykes@gmail.com for this example on nested loops -->
+ <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"
+ 'span.trackNum': '#{track.trackNumber}:', // prepend
+ 'span.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>
Please sign in to comment.
Something went wrong with that request. Please try again.