Created
August 10, 2011 02:28
-
-
Save Lobstrosity/1135937 to your computer and use it in GitHub Desktop.
jQuery Templates Plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/x-jquery-tmpl"> | |
| {{each items}} | |
| <li>${$value}</li> | |
| {{/each}} | |
| <!-- is equivalent to --> | |
| {{each(i, item) items}} | |
| <li>${item}</li> | |
| {{/each}} | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Templates Yay</title> | |
| </head> | |
| <body> | |
| <div id="music"></div> | |
| <script id="musicTemplate" type="text/x-jquery-tmpl"> | |
| <!-- Render information for each item in the albums array. --> | |
| {{each albums}} | |
| <p><strong>${title}</strong></p> | |
| <p>${artist}</p> | |
| <ul> | |
| <!-- Render information for each track in the current | |
| album's tracks array. --> | |
| {{each(i, track) tracks}} | |
| <!-- Use the index to optionally give the list item a | |
| first, last, or no class. --> | |
| {{if i === 0}} | |
| <li class="first">${track}</li> | |
| {{else i === tracks.length - 1}} | |
| <li class="last">${track}</li> | |
| {{else}} | |
| <li>${track}</li> | |
| {{/if}} | |
| {{/each}} | |
| </ul> | |
| {{/each}} | |
| </script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
| <script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script> | |
| <script> | |
| var musicData = { | |
| albums: [ | |
| { | |
| title: 'Swoon', | |
| artist: 'Silversun Pickups', | |
| tracks: [ | |
| 'There\'s No Secrets This Year', | |
| 'The Royal We', | |
| 'Growing Old Is Getting Old', | |
| 'It\'s Nice To Know You Work Alone', | |
| 'Panic Switch', | |
| 'Draining', | |
| 'Sort Of', | |
| 'Substitution', | |
| 'Catch And Release', | |
| 'Surrounded' | |
| ] | |
| } | |
| // etc. | |
| ] | |
| }; | |
| $('#music').html($('#musicTemplate').tmpl(musicData)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment