javascript templates

sometimes when using ajax, you need to replace large html blocks, but it is not always convenient to create a bunch of DOM elements in order for the formatting to remain the same as it was. Some transmit html code to ajax immediately and paste it into the right place, but prototype developers made a better implementation when you can transfer only JSON data from the server and then insert it into a separate template using JavaScript ... borrowed the idea, simplifying it a little



such a small classic implements the functions of a template engine in JavaScript, it's pretty easy to use it:



1 - connect class

function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .

1. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
2. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
3. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
4. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
5. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
6. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
7. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
8. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
9. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
10. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
12. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
13. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
14. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
15. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
16. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
17. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
19. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
20. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
21. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
22. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
23. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
24. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
25. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
26. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
27. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
28. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .
29. function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .

function Template( template ) { var _template = template.toString(); var _pattern = /(#\{.*?\})/g; this .evaluate = function ( object ) { if ( !( object instanceof Array ) ) { object = new Array( object ); } var result = '' ; for ( var q = 0; q < object .length; q++ ) { var tmpTemplate = _template; result += tmpTemplate.replace(_pattern, function (match) { var key = match.substring(2, match.length-1); if ( undefined !== object [q][key] ) { return object [q][key]; } return '' ; }); } return result; } }; * This source code was highlighted with Source Code Highlighter .

2 - we create a template that we need (each variable is separated by # {- in front and} - in back):

var template = '<div> # {someText} <a href="#{href}"> # {otherText} </a> </ div>';

')

3 - create an object to work with the template

var templateParser = new Template (template);



well, we actually get ready html code that can be inserted anywhere based on your data

the object keys must match the variables in the template if the key is not in the template it is ignored

and if extra variables remain in the template, they are deleted

var htmlData = templateParser.evaluate ({someText: 'to view comments', href: '/ comments', otherText: 'click here'});



the result will be the following line: <div> to view comments <a href="/comments"> click here </a> </ div>



upd: yes! This method is slower than adding via DOM, but saving code with large attachments of elements on the face



upd2: I changed the code, tested it at firefox, it works 2 times faster than through DOM, the example is weak:

< div style ="border: 1px solid red; padding: 5px;" id ="container" > <br> < div style ="border: 1px solid blue; margin: 2px; display: inline" > <br> 0 < a href ="/element0" > </ a > <br> </ div > <br> <!-- .. 37 --> <br> </ div > <br><br> * This source code was highlighted with Source Code Highlighter .