Skip to content

Instantly share code, notes, and snippets.

@JamieMason
Created December 15, 2010 14:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamieMason/742024 to your computer and use it in GitHub Desktop.
Save JamieMason/742024 to your computer and use it in GitHub Desktop.
really simple form of templating in JavaScript, this function replaces named tokens in strings with the values of Object properties of the same name. When an Array is passed, the template is repeated for every object in the Array.
/**
* A really simple form of templating, this function replaces named tokens in strings with the values of Object properties of the same name.
* When an Array is passed, the template is repeated for every object in the Array.
*
* @author https://github.com/JamieMason
* @param {String} template A string containing various ${someVar}, ${someOtherVar} tokens to be found and replaced
* @param {Object} data A value object whose properties' values eg: .someVar, .someOtherVar will be merged with the supplied template. If an Array is passed, the template will be applied to each Object in the Array.
* @return A copy of the template merged with your data, in those places where the property names of your data matched the named tokens in the template.
* @type String
*/
function mergeTemplateWithData(template, data)
{
// If the data is no good
if (!(!$.isPlainObject(data) || !$.isArray(data)))
{
// Return the unmerged template
return template;
}
// Merge one Object with a template
function _performTransform(valueObject, template)
{
var matchingString = '', key;
for (key in valueObject)
{
matchingString = ['${', key, '}'].join('');
template = template.split(matchingString).join(valueObject[key]);
}
return template;
}
// If data is an Array
if ($.isArray(data))
{
var arrayLength = data.length,
mergedTemplate = '',
i;
// Loop through it
for (i = 0; i < arrayLength; i++)
{
// and build up a string which merges every item in the array with the given template
mergedTemplate = [mergedTemplate, _performTransform(data[i], template)].join('');
}
return mergedTemplate;
}
// If data is a value object
else
{
// Merge the one Object with the template
return _performTransform(data, template);
}
}
// Merge 1 object with a template
mergeTemplateWithData('Hi, my name is ${forename} ${surname}, I like ${hobby}', {
forename: 'Jamie',
surname: 'Mason',
hobby: 'Football'
});
// >>> "Hi, my name is Jamie Mason, I like Football"
// Merge an Array of Objects with a template
var someLinks = mergeTemplateWithData('<li><a href="${url}">${label}</a></li>', [{
url: 'http://google.com',
label: 'Google Search'
},
{
url: 'http://jquery.com',
label: 'jQuery JavaScript Library'
}]);
// >>> '<li><a href="http://google.com">Google Search</a></li><li><a href="http://jquery.com">jQuery JavaScript Library</a></li>'
$('ul#navigation').html(someLinks);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment