/
template.js
76 lines (54 loc) · 1.87 KB
/
template.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
// Mini template library
var template = function(selector, data, callback){
if (!(this instanceof template)) {
return new template(selector, data, callback);
}
this.selector = selector;
this.data = data;
this.callback = callback;
var self = this;
// Give flexibility to a selector/element
function select(selector){
return typeof selector == 'string' ?
document.querySelector(selector) :
selector;
}
// Parse the data using the template, data and callback into partial templates
this.parse = function(){
// Select the template from the content
this.template = select(this.selector).content;
// Make sure we're dealing with an array of things for mapping
this.data = Array.isArray(this.data) ? this.data : [this.data];
// Default callback is an empty function
this.callback = this.callback || function(){};
var self = this;
return this.data.map(function(data, index){
// Generate the template into fragment
var fragment = self.template.cloneNode(true);
self.callback.call(fragment, data, index);
return fragment;
});
};
// Allow to append the object
this.appendTo = function(selector){
// Find out the real selector
var where = select(selector);
// We need to fill the templates with the data first
// Note: this is 100x faster than doing forEach() inside parse()
self.parse().forEach(function(data, index){
// Append it in the proper place
where.appendChild(data);
});
return self;
};
// Replace the content of selector with the current elements
this.into = function(selector) {
// Delete the previous content
select(selector).innerHTML = '';
// And add the new one, reusing the appendTo()
self.appendTo(selector);
return self;
};
// Allow simple chaining with .array, .appendTo() or into()
return this;
};