/
jquery.view-engine.js
286 lines (267 loc) · 12.1 KB
/
jquery.view-engine.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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
/*
* File: jquery.view-engine.js
* Version: 1.1.2
* Author: Jovan Popovic
*
* Copyright 2017 Jovan Popovic, all rights reserved.
*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, as supplied with this software.
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE.
*
* This file contains implementation of the JQuery templating engine that load JSON
* objects into the HTML code. It is based on Alexandre Caprais notemplate plugin
* with several enchancements that are added to this plugin.
*/
(function ($) {
$.fn.view = function (obj, options) {
if (!(typeof obj == "object")) {
console.error("Object should be provided as a model instead of " + (typeof obj));
throw "Object should be provided as a model instead of " + (typeof obj);
}
function loadSelect(nSelect, aoValues, name) {
///<summary>
///Load options into the select list
///</summary>
///<param name="nSelect" type="select">Select list</param>
///<param name="aoValues" type="Array{value,text,selected}">Array of object containin the options</param>
///<param name="name" type="String">Name of the select list</param>
var key = $(nSelect).attr("data-key") || name || nSelect.name || nSelect.id;
var text = $(nSelect).attr("data-text") || "text";
for (i = 0; i < aoValues.length; i++) {
$("<option/>")
.attr("value", aoValues[i][key] || aoValues[i].value || aoValues[i])
.text(aoValues[i][text] || aoValues[i])
.attr("selected", aoValues[i].selected)
.appendTo($(nSelect));
}
}
function setElementValue(element, value, name) {
var type = element.type || element.tagName;
if (type == null && element.length == 1) {
type = element[0].type || element[0].tagName; //select returns undefined if called directly
}
if (type==null)
return;
type = type.toLowerCase();
switch (type) {
case 'text':
case 'hidden':
case 'date':
case 'week':
case 'month':
case 'time':
case 'email':
case 'url':
case 'tel':
case 'color':
case 'datetime-local':
case 'number':
case 'range':
case 'submit':
case 'button':
$(element).val(value);
break;
case 'radio':
if (value.toString().toLowerCase() == element.value.toLowerCase()) {
$(element).attr("checked", "checked");
}
break;
case 'checkbox':
if (value) {
$(element).attr("checked", true).attr("value",true);
}
break;
case 'select':
case 'select-one':
case 'datalist':
if (typeof value == "string" || typeof value == "number" || typeof value == "boolean") {
$(element).val(value);
} else if (value.constructor == Array) {
loadSelect(element, value, name);
} else {
console.error("Cannot bind " + value + " to " + type);
}
break;
case 'select-multiple':
var select = element[0];
if (element[0].options == null || typeof (element[0].options) == "undefined") {
select = element;
}
if (select.options.length > 1) {
//If select list is not empty use values array to select options
var values = value.constructor == Array ? value : [value];
for (var i = 0; i < select.options.length; i++) {
for (var j = 0; j < values.length; j++) {
select.options[i].selected |= select.options[i].value == values[j];
}
}
} else {
//ELSE: Instead of selecting values use values array to populate select list
loadSelect(element, value, name);
}
break;
case 'option':
var $option = $(element);
// value can be object {value,text,selected} or scalar
$option.attr("value", value.value || value);
$option.text(value.text || value.value || value);
if (value.selected)
$option.attr("selected", true);
break;
case 'a':
var href = $(element).attr("href");
var iPosition = href.indexOf('#');
if (iPosition > 1000000) {
href = href.substr(0, iPosition) + '&' + name + '=' + value + href.substr(iPosition)
} else {
iPosition = href.indexOf('?');
if (iPosition > 0) // if parameters in the URL exists add new pair using &
href += '&' + name + '=' + value;
else//otherwise attach the name=value pair to the URL
href = href + '?' + name + '=' + value;
}
$(element).attr("href", href);
break;
case 'img':
var $img = $(element);
if (typeof value == "string") {
//Assumption is that value is in the HREF$ALT format
var iPosition = value.indexOf('$');
var src = "";
var alt = "";
if (iPosition > 0) {
src = value.substring(0, iPosition);
alt = value.substring(iPosition + 1);
}
else {
src = value;
}
$img.attr("src", src);
$img.attr("alt", alt);
} else {
$img.attr("src", obj.src);
$img.attr("alt", obj.alt);
$img.attr("title", obj.title);
}
break;
case 'form':
{
var $form = $(element);
if (typeof value == "string" || typeof value == "number") {
var action = $form.attr("action");
if (action.indexOf("{{" + name + "}}") > 0) {
$form.attr("action", action.replace("{{" + name + "}}", value));
} else {
$form.attr("action", action + value);
}
}
break;
}
case 'textarea':
$(element).html(value.toString());
break;
default:
try {
var attr = $(element).attr("data-target-attr");
if(typeof attr !== typeof undefined && attr !== false)
$(element).attr(attr, value.value || value);
else {
if(properties.rawMarkup)
$(element).html(value.toString());
else
$(element).text(value.toString());
}
} catch (exc) {
console.error(exc);
}
}
}
function bind(data, domNode, name) {
if (data == null)
return;
if (data.constructor == Object) {
if (domNode.length >= 1 && domNode[0].tagName == "OPTION")
{
// Shortcut: if tag is OPTION and data is object - set the value of OPTION
setElementValue(domNode[0], data, name);
return;
}
else {
for (var prop in data) {
if (prop == null || typeof prop == "undefined")
continue;
else {
if( $(domNode).hasClass("bind-" + prop)){
// Current DOM element has a class that might to be bound to the property
// try to bing it.
// Supports {a:{b:{c:17}}} <span class="bind-a bind-b bind-c"
bind(data[prop], domNode, prop);
}
else {
//Find an element with class, id, or name that matches the property name
var sSelector = ".bind-" + prop + ", #" + prop + ', [name="' + prop + '"]';
bind(data[prop], jQuery(sSelector, domNode), prop);
}
}
}
}
}
else if (data.constructor == Array) {
if ( domNode.tagName == "SELECT" || domNode.tagName == "DATALIST"
|| domNode.length == 1 && (domNode[0].tagName == "SELECT" || domNode[0].tagName == "DATALIST")
) {
setElementValue(domNode, data, name);
return;
} else
{
// Clone the element that will be used as template (e.g. <li> or <tr>)
var template = $(domNode).clone(true);
for (var i = data.length - 1; i > 0 ; i--){
// Put the clone of template on the second place and puth other after.
var target = template.clone(true).insertAfter( $(domNode));
// Bind i-th object into the new placeholder.
bind(data[i], target, name);
}
// Bind 0-th object into the element used as a prototype (the first one).
bind(data[0], $(domNode), name);
}
} // End Array
else {
// Scalar value
if (domNode.length > 0) {
// If someone needs to bind scalar into multiple elements:
for (var i = 0; i < domNode.length; i++)
setElementValue(domNode[i], data, name);
}
else {
setElementValue(domNode, data, name);
}
}
} //function bind() ends
function init(placeholder) {
if (placeholder.data("jquery-view-template") != null && placeholder.data("jquery-view-template") != "") {
var template = placeholder.data("jquery-view-template");
placeholder.html(template);
} else {
var template = placeholder.html()
placeholder.data("jquery-view-template", template);
}
}
var defaults = {
onLoading: jQuery.noop,
onLoaded: jQuery.noop,
rawMarkup: false
};
properties = $.extend(defaults, options);
return this.each(function () {
init($(this));
properties.onLoading();
bind(obj, this);
properties.onLoaded();
});
};
})(jQuery);