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
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
105
106
107
108
109
110
|
export default Template
var htmlEscapes = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
'\'': ''',
'`': '`'
}
var escapeHtmlChar = function(chr) {
return htmlEscapes[chr]
}
var reUnescapedHtml = /[&<>"'`]/g
var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source)
var escape = function(string) {
if (string && reHasUnescapedHtml.test(string)) {
return string.replace(reUnescapedHtml, escapeHtmlChar)
} else {
return string
}
}
/**
* Sets up defaults for all the Template methods such as a default template
*
* @constructor
*/
function Template() {
this.defaultTemplate = `
<li data-id="{{id}}" class="{{completed}}">
<div class="view">
<input class="toggle" type="checkbox" {{checked}} />
<label>{{title}}</label>
<button class="destroy"></button>
</div>
</li>
`
}
/**
* Creates an <li> HTML string and returns it for placement in your app.
*
* NOTE: In real life you should be using a templating engine such as Mustache
* or Handlebars, however, this is a vanilla JS example.
*
* @param {object} data The object containing keys you want to find in the
* template to replace.
* @returns {string} HTML String of an <li> element
*
* @example
* view.show({
* id: 1,
* title: "Hello World",
* completed: 0,
* });
*/
Template.prototype.show = function(data) {
var i, l
var view = ''
for (i = 0, l = data.length; i < l; i++) {
var template = this.defaultTemplate
var completed = ''
var checked = ''
if (data[i].completed) {
completed = 'completed'
checked = 'checked'
}
template = template.replace('{{id}}', data[i].id)
template = template.replace('{{title}}', escape(data[i].title))
template = template.replace('{{completed}}', completed)
template = template.replace('{{checked}}', checked)
view = view + template
}
return view
}
/**
* Displays a counter of how many to dos are left to complete
*
* @param {number} activeTodos The number of active todos.
* @returns {string} String containing the count
*/
Template.prototype.itemCounter = function(activeTodos) {
var plural = activeTodos === 1 ? '' : 's'
return '<strong>' + activeTodos + '</strong> item' + plural + ' left'
}
/**
* Updates the text within the "Clear completed" button
*
* @param {[type]} completedTodos The number of completed todos.
* @returns {string} String containing the count
*/
Template.prototype.clearCompletedButton = function(completedTodos) {
if (completedTodos > 0) {
return 'Clear completed'
} else {
return ''
}
}
|
