Myna. Template

Create a text template with placeholders that can be merged with data at runtime

Adapted from the Ext library (http://extjs.com)

See Myna.XTemplate for more flexible template processing

Summary
Myna. TemplateCreate a text template with placeholders that can be merged with data at runtime
Functions
TemplateCreates a new template from the supplied string or array of strings
applyMerges this template with the supplied data.
Myna. XTemplateAn extention of Myna.Template that supports looping and conditional operations
Functions
XTemplateCreates a new template from the supplied string or array of strings
ApplyMerges this template with the supplied data.

Functions

Template

Creates a new template from the supplied string or array of strings

Parameters

text*a string or array of strings, or several string arguments that represent the template.  See the examples below

Examples

//single string
var t = new Myna.Template("My name is {name}");

//array of strings
var t = new Myna.Template([
"My",
" name",
" is ",
"{name}"
]);

//several string parameters
var t = new Myna.Template(
"My",
" name",
" is ",
"{name}"
);

apply

Merges this template with the supplied data.

Parameters

values{Object/Array} values The template values.  Can be an array if your params are numeric (i.e.  {0}) or an object (i.e.  {foo: ‘bar’})

Returns

Merged string

Examples

//single string
var t = new Myna.Template("My name is {0}").apply(["Bob"]);

var t = new Myna.Template("My name is {name}").apply({name:"bob"});

Myna. XTemplate

An extention of Myna.Template that supports looping and conditional operations

XTemplate supports many special tags and built-in operators that aren’t defined as part of the API, but are supported in the templates that can be created.  The following examples demonstrate all of the supported features.

This is the data object used for reference in each code example

var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
company: 'Ext JS, LLC',
email: 'jack@extjs.com',
address: '4 Red Bulls Drive',
city: 'Cleveland',
state: 'Ohio',
zip: '44102',
drinks: ['Red Bull', 'Coffee', 'Water'],
kids: [{
name: 'Sara Grace',
age:3
},{
name: 'Zachary',
age:2
},{
name: 'John James',
age:0
}]
};

Auto filling of arrays and scope switching

Using the tpl tag and the for operator, you can switch to the scope of the object specified by for and access its members to populate the template.  If the variable in for is an array, it will auto-fill, repeating the template block inside the tpl tag for each item in the array

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name}</p>',
'</tpl></p>'
);
$res.print(tpl.apply(data));

Access to parent object from within sub-template scope

When processing a sub-template, for example while looping through a child array, you can access the parent object’s members via the parent object

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age &gt; 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
$res.print(tpl.apply(data));

Array item index and basic math support

While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).  Templates also support the basic math operators + - and / that can be applied directly on numeric data values:

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age &gt; 1">',
'<p>{#}: {name}</p>', // <-- Auto-number each item
'<p>In 5 Years: {age+5}</p>', // <-- Basic math
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
$res.print(tpl.apply(data));

Auto-rendering of flat arrays

Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a loop.  This variable will represent the value of the array at the current index:

var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
$res.print(tpl.apply(data));

Basic conditional logic

Using the tpl tag and the if operator you can provide conditional checks for deciding whether or not to render specific parts of the template.  Note that there is no else operator -- if needed, you should use two opposite if statements.  Properly-encoded attributes are required as seen in the following example:

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age &amp;gt; 1">', // <-- Note that the > is encoded
'<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
$res.print(tpl.apply(data));

Ability to execute arbitrary inline code

In an XTemplate, anything between {[ ...  ]} is considered code to be executed in the scope of the template.  There are some special variables available in that code:

valuesThe values in the current scope.  If you are using scope changing sub-templates, youcan change what values is.
parentThe scope (values) of the ancestor template.
xindexIf you are in a looping template, the index of the loop you are in (1-based).
xcountIf you are in a looping template, the total length of the array you are looping.

This example demonstrates basic row striping using an inline code block and the xindex variable:</p>

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[company.toUpperCase() + ', ' + title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">,
'{name}',
'</div>',
'</tpl></p>'
);
$res.print(tpl.apply(data));

Template member functions

One or more member functions can be defined directly on the config object passed into the XTemplate constructor for more complex processing:

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
$res.print(tpl.apply(data));

Sub Templates

Other XTemplates can be included inside a template.  Simply use [path to template] to include them.  The sub template will be passed the current values when encountered.  See Myna.includeTemplate

var tpl = new Ext.XTemplate(
'<html>',
'[header.tpl]',
'[body.tpl]',
'[footer.tpl]',
'<html>',
);
$res.print(tpl.apply(data));
Summary
Functions
XTemplateCreates a new template from the supplied string or array of strings
ApplyMerges this template with the supplied data.

Functions

XTemplate

Myna.XTemplate = function()

Creates a new template from the supplied string or array of strings

Parameters

text*a string or array of strings, or several string arguments that represent the template.  See the examples below

Examples

//single string
var t = new Myna.XTemplate("My name is {name}");

//array of strings
var t = new Myna.XTemplate([
"My",
" name",
" is ",
"{name}"
]);

//several string parameters
var t = new Myna.XTemplate(
"My",
" name",
" is ",
"{name}"
);

Apply

Merges this template with the supplied data.

Parameters

values{Object/Array} values The template values.  Can be an array if your params are numeric (i.e.  {0}) or an object (i.e.  {foo: ‘bar’})

Returns

Merged string

Create a text template with placeholders that can be merged with data at runtime
Myna.XTemplate = function()
Creates a new template from the supplied string or array of strings
An extention of Myna.Template that supports looping and conditional operations
Myna.includeTemplate=function Myna_includeTemplate(path,
values)
Includes a file as a Myna.XTemplate