Created
December 15, 2010 14:48
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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