gistfile1.js

<apex:component layout="none" controller="ABSI_DEMO_rmjsmustacheController" >
  <!-- mustache templates  -->
	<script id="itunes-search-results" type="text/html">
		{{#results}}
			<h3><img src="{{artworkUrl30}}" height="30" width="30"/> {{trackName}} - {{artistName}}</h3>
			<div>
				<div class="dataWrapper">
					{{#artworkUrl100}}
						<p style="width:100px; height:100px; float:left; margin-right:10px;">
						<img src="{{artworkUrl100}}" height="100" width="100" alt="" />
						<p>
						<p style="width:400px: height:100px; float:left;">
					{{/artworkUrl100}}
					{{#artistName}}
						<span class="dataLabel">{! $Label.Artist}</span> {{artistName}}<br/>
					{{/artistName}}
					{{#kind}}
						<span class="dataLabel">{! $Label.Type}</span> {{kind}}<br/>
					{{/kind}}
					{{#trackName}}
						<span class="dataLabel">{! $Label.Name}</span> {{trackName}}<br/>
					{{/trackName}}
					{{#primaryGenreName}}
						<span class="dataLabel">{! $Label.Genre}</span> {{primaryGenreName}}<br/>
					{{/primaryGenreName}}
					{{#trackPrice}}
						<span class="dataLabel">{! $Label.Genre}</span> {{trackPrice}}{{currency}}<br/>
					{{/trackPrice}}
					{{#collectionViewUrl}}
						<a href="{{collectionViewUrl}}">Check it out on iTunes.</a>
					{{/collectionViewUrl}}
					{{#artworkUrl100}}
						</p>
					{{/artworkUrl100}}
					{{#longDescription}}
						<p style="width:500px; float:left;"><span class="dataLabel">{! $Label.Description}</span>{{longDescription}}<br/><p>
					{{/longDescription}}
				</div>
			</div>
		{{/results}}
		{{#error}}
			<p>{{error}}</p>
		{{/error}}
	</script>
	
	<!-- functional script  -->
	<script>
            //var x = {! controllerProperty}; //this is a great way to push data to javascript available on the initial pageload
		$(document).ready(function() {
			//load template
			$.Mustache.addFromDom('itunes-search-results');
			
			//prepare the jQueryUI accordion widget
			$('#data-container').accordion();
			
			//handle search
			$('#search-form').submit(function(e) {
				e.preventDefault();
				SearchItunes($('#search-input').val()); 	
				return false;
			});
		});	
		
		//Performs a Remote JS call to the Apex controller and renders the results on the page using mustache
		function SearchItunes(query){
			//load data through force.com  
			Visualforce.remoting.Manager.invokeAction( 
					'{! $RemoteAction.ABSI_DEMO_rmjsmustacheController.getItunesSearch}', 
					query, 
					function (result, event) {
						if (event.status) {
							$('#data-container').mustache('itunes-search-results', jQuery.parseJSON(result),{method : 'html'}); //apply template with data	
							$('#data-container').accordion("refresh"); //update the widget
                                                                        $('#data-container').accordion(“option”,”active”,0);
						} else if (event.type === 'exception') {
							$('#data-container').mustache('itunes-search-results', '{"error":"{! $Label.RemJSExc}"}', {method : 'html'});
						}
					}, 
					{escape: false}
			); 
		}
	</script>
</apex:component>