JSFiddle - React, Tailwind, and code Playground

by jimfrenette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<ul class="artist-list"></ul>

<script id="tmpl-artist" type="text/tmpl">
	{{#each this}}
	<li data-artist-id="{{ArtistId}}">{{Name}}</li>
	{{/each}}
</script>

JavaScript

/* json data sample
data = 
[{"ArtistId":43,"Name":"A Cor Do Som"},{"ArtistId":230,"Name":"Aaron Copland & London Symphony Orchestra"},{"ArtistId":202,"Name":"Aaron Goldberg"},{"ArtistId":1,"Name":"AC/DC"}]
*/

$(function() {
	var tmplSource = $('#tmpl-artist').html(),
		template = Handlebars.compile(tmplSource);

	$.getJSON('http://responsiveresourcesgroup.com/chinook/api/artists').done(function(data) {
		if (data) {  
			
			$(".artist-list").html(template(data));
		}
	});
});