Blame view

sources/core/js/octemplate.js 3.01 KB
31b7f2792   Kload   Upgrade to ownclo...
1
2
3
  /**
   * jQuery plugin for micro templates
   *
6d9380f96   Cédric Dupont   Update sources OC...
4
5
   * Strings are automatically escaped, but that can be disabled by setting
   * escapeFunction to null.
31b7f2792   Kload   Upgrade to ownclo...
6
7
8
9
10
11
12
13
14
   *
   * Usage examples:
   *
   *	var htmlStr = '<p>Bake, uncovered, until the {greasystuff} is melted and the {pasta} is heated through, about {min} minutes.</p>'
   *	$(htmlStr).octemplate({greasystuff: 'cheese', pasta: 'macaroni', min: 10});
   *
   * 	var htmlStr = '<p>Welcome back {user}</p>';
   *	$(htmlStr).octemplate({user: 'John Q. Public'}, {escapeFunction: null});
   *
6d9380f96   Cédric Dupont   Update sources OC...
15
16
   * Be aware that the target string must be wrapped in an HTML element for the
   * plugin to work. The following won't work:
31b7f2792   Kload   Upgrade to ownclo...
17
18
19
20
   * 
   *      var textStr = 'Welcome back {user}';
   *      $(textStr).octemplate({user: 'John Q. Public'});
   *
6d9380f96   Cédric Dupont   Update sources OC...
21
22
23
   * For anything larger than one-liners, you can use a simple $.get() ajax
   * request to get the template, or you can embed them it the page using the
   * text/template type:
31b7f2792   Kload   Upgrade to ownclo...
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
   *
   * <script id="contactListItemTemplate" type="text/template">
   *	<tr class="contact" data-id="{id}">
   *		<td class="name">
   *			<input type="checkbox" name="id" value="{id}" /><span class="nametext">{name}</span>
   *		</td>
   *		<td class="email">
   *			<a href="mailto:{email}">{email}</a>
   *		</td>
   *		<td class="phone">{phone}</td>
   *	</tr>
   * </script>
   *
   * var $tmpl = $('#contactListItemTemplate');
   * var contacts = // fetched in some ajax call
   *
   * $.each(contacts, function(idx, contact) {
   * 		$contactList.append(
   * 			$tmpl.octemplate({
   * 				id: contact.getId(),
   * 				name: contact.getDisplayName(),
   * 				email: contact.getPreferredEmail(),
   * 				phone: contact.getPreferredPhone(),
   * 			});
   * 		);
   * });
   */
  (function( $ ) {
  	/**
  	* Object Template
  	* Inspired by micro templating done by e.g. underscore.js
  	*/
  	var Template = {
  		init: function(vars, options, elem) {
  			// Mix in the passed in options with the default options
  			this.vars = vars;
  			this.options = $.extend({},this.options,options);
  
  			this.elem = elem;
  			var self = this;
  
  			if(typeof this.options.escapeFunction === 'function') {
  				var keys = Object.keys(this.vars);
  				for (var key = 0; key < keys.length; key++) {
  					if(typeof this.vars[keys[key]] === 'string') {
  						this.vars[keys[key]] = self.options.escapeFunction(this.vars[keys[key]]);
  					}
  				}
  			}
  
  			var _html = this._build(this.vars);
  			return $(_html);
  		},
  		// From stackoverflow.com/questions/1408289/best-way-to-do-variable-interpolation-in-javascript
  		_build: function(o){
  			var data = this.elem.attr('type') === 'text/template' ? this.elem.html() : outerHTML(this.elem.get(0));
  			try {
  				return data.replace(/{([^{}]*)}/g,
  					function (a, b) {
  						var r = o[b];
  						return typeof r === 'string' || typeof r === 'number' ? r : a;
  					}
  				);
  			} catch(e) {
  				console.error(e, 'data:', data);
  			}
  		},
  		options: {
  			escapeFunction: escapeHTML
  		}
  	};
  
  	$.fn.octemplate = function(vars, options) {
  		var vars = vars ? vars : {};
  		if(this.length) {
  			var _template = Object.create(Template);
  			return _template.init(vars, options, this);
  		}
  	};
  
  })( jQuery );