Top

Scripts

Draft

Each template can have a template script attached to it to perform logic. This is necessary for example to respond to user actions such as button clicks.

The Aria templates framework automatically copies the template script prototype members to the template prototype so that the template is given access to everything declared in the template script. The template script is similar to a normal Aria Templates class but is defined with Aria.tplScriptDefinition.


Script definition properties

The following properties are accepted in the parameter of Aria.tplScriptDefinition:

  • $classpath
  • $constructor
  • $destructor
  • $dependencies
  • $resources
  • $statics
  • $prototype

These properties are a subset of the properties accepted in Aria.classDefinition. Please refer to the documentation of Aria Template Classes for more information about their meaning.

Practical example

An example illustrating calling a method in the template script class can be examined here.

First the template is defined as follows:

 {Template {
 	$classpath:'tutorials.templatescripts.step1.SampleTemplate',
 	$hasScript:true
 }}
 
 	{macro main()}	
 		${showAlert()}							
 	{/macro}	
 {/Template}

It's important to notice that in the template declaration we've specified a $hasScript:true whose default value is false. When this flag is specified we have to provide a template script named exactly as the template with the suffix Script, in our case SampleTemplateScript declared in the file SampleTemplateScript.js. When the template is evaluated we try to call a method showAlert() in the script, so now let's have a look at how we define our template script.

 Aria.tplScriptDefinition({
 	$classpath : 'tutorials.templatescripts.step1.SampleTemplateScript',
 	$prototype : {
 
 		showAlert: function() {
 			alert('Alert!');
 		}
 	}
 });

As we see in the example, the template script classpath name must follow the name pattern described above. The showAlert() method is now accessible from the template and when we render it with the following html, we'll have a popup showing up.

<body>
	<div id="sample" style="padding:10px"></div>
 
	<script type="text/javascript">
 
		Aria.loadTemplate({
			classpath:'tutorials.templatescripts.step1.SampleTemplate',
			div:"sample",
		});
 
	</script>
</body>
and has been viewed 522 times.