Mustache.js – How to create a client side Repeat control in XPages

Whether or not you realize it, everyone who uses a repeat control in XPages development is actually using a server-side template. Let me demonstrate the concept….

We create an object through many different interactions with the XPages back end APIs and Server-Side JavaScript interactions. The object can be many different constructs. The XPages repeat control then iterates through each member within the object and repeats the same thing over and over based on the repeat control’s starting value object.

In the following example we create a repeat control from a JavaScript array control. It iterates over each object within the array allowing the repeat control to work as a template for creating HTML.

<xp:repeat id="repeat1" rows="30" var="myObj">
	<xp:this.value><![CDATA[#{javascript:
	var myArray=[
		 {
			  "@entryid":"1-431C28F894B0548185257C22000A8403",
			  "firstname":"Agnes C.",
			  "lastname":"Smith",
			  "address":"24256 Leisure Lane"
		  },
		  {
			  "@entryid":"2-4ED02366A420D23985257C4F000B0BD7",
			  "firstname":"Albert",
			  "lastname":"Scoggins",
			  "address":"3525 Koontz Lane, second"
		  },
		  {
			  "@entryid":"3-6D8120FA75B4BCCF85257C4F000B0B5D",
			  "firstname":"Alejandra",
			  "lastname":"Dodge",
			  "address":"3044 Simpson Avenue"
		  }
	]

	return myArray}]]>
	</xp:this.value>
	<p>	Hello my is
		<strong>
		<xp:text escape="true"
			id="f1" tagName="h4" disableTheme="true"
			value="#{javascript:myObj.firstname +' '+ myObj.lastname}">
		</xp:text>
		</strong>
	</p>
	<br />
	<p>
		I live at
		<xp:text escape="true"
			id="f2" tagName="h4" disableTheme="true"
			value="#{javascript:myObj.address}">
		</xp:text>
	</p>
	<hr />
</xp:repeat>

The output from this repeat control is shown below

mp1

HTML Templating

Using the mustache.js library we are able to display a JavaScript object using an HTML repeat control in a directly analogous way to the XPages server-side method described above. The following code does pretty much the same as the server side example above.

What is interesting to note is the use of the SCRIPT tag in the following code. By giving it a type of “text/template” the browser does not execute the contents of the SCRIPT tag. But it also ignores the HTML within. We can access the contents of the script as it is a DOM object. This makes for the perfect storage container – we do not have to hide the template HTML with CSS.

The HTML

<!-- mustache uses AMD and as such will not work in R9 unles you add it this way *stupid dojo 1.8 issue*-->
<xp:this.resources>
		<xp:headTag tagName="script">
			<xp:this.attributes>
				<xp:parameter name="type" value="text/javascript" />
				<xp:parameter name="src" value="js/mustache.js" />
			</xp:this.attributes>
		</xp:headTag>
</xp:this.resources>

<script type="text/template" class="template">
{{#items}}
	<br /><p>	Hello my is
		<strong>
		{{firstname}} {{lastname}}
		</strong>
	</p>
	<p>
		I live at
		{{address}}
	</p>
	<hr />
{{/items}}
</script>
<div class="templateHere"></div>

The JavaScript

$('document').ready(function(){

	var myArray={
		items:[
		 {
			  "@entryid":"1-431C28F894B0548185257C22000A8403",
			  "firstname":"Agnes C.",
			  "lastname":"Smith",
			  "address":"24256 Leisure Lane"
		  },
		  {
			  "@entryid":"2-4ED02366A420D23985257C4F000B0BD7",
			  "firstname":"Albert",
			  "lastname":"Scoggins",
			  "address":"3525 Koontz Lane, second"
		  },
		  {
			  "@entryid":"3-6D8120FA75B4BCCF85257C4F000B0B5D",
			  "firstname":"Alejandra",
			  "lastname":"Dodge",
			  "address":"3044 Simpson Avenue"
		  }]
	}
	var e, newStuff, template;
	try {
		 template = $('.template').html();		//Get the HTML from within the SCRIPT tag with the template class
		 newStuff = Mustache.to_html(template, myArray)	//Apply the myArray object to the template HTML
	   } catch (_error) {
		 e = _error;
		 newStuff = e.toString();
	   }
	$('.templateHere').html(newStuff)
})

Here is the web page created
mp2

Below you can see a direct comparison between the repeat control code and the HTML template code

mp3

Implementing a REST service

The example above uses a typed JavaScript object to create the data for the template – and you have probably realized the example I used is the same format as a XPages REST service <xe:viewItemFileService> feed. So with a little bit of AJAX to put in the data object we are able to create the same output using REST data rather than typed object.

$('document').ready(function(){
	var e, newStuff, json, template;
	$.ajax({
		url: 'xRestService.xsp/byFirstName'
	}).done(function(data){
	try {
	     template = $('.template').html();
	     newStuff = Mustache.to_html(template, data)
	   } catch (_error) {
	     e = _error;
	     newStuff = e.toString();
	   }
	   $('.templateHere').html(newStuff)
	})
})

Except in this case we loaded *all* the names in the REST service into the page using the template – in 15 lines of code

mp4

Conclusion

While there may not, on the surface, seem to be much point in using HTML templating when we have server-side repeat control templating, if you want to take your web applications running on XPages into the future, this is the beginning…………More to come on this topic🙂

2 thoughts on “Mustache.js – How to create a client side Repeat control in XPages

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s