0
# Browser Integration
1
2
Client-side DOM manipulation and jQuery integration for interactive web applications. Provides seamless integration with existing DOM elements and jQuery-based workflows with automatic event hydration and dynamic updates.
3
4
## Capabilities
5
6
### DOM Element Extension
7
8
Extends native DOM elements with json2html rendering capabilities for direct integration with existing web pages.
9
10
```javascript { .api }
11
/**
12
* Render template and manipulate DOM element content
13
* Available on all DOM Elements when json2html is loaded in browser
14
* @param {object|array|string} obj - JSON object, array, or JSON string to render
15
* @param {object|array} template - json2html template
16
* @param {object} [options] - Configuration options
17
* @param {string} [options.method="append"] - DOM manipulation method: "append", "prepend", or "replace"
18
* @param {object} [options.props] - Properties for template rendering
19
* @param {object} [options.components] - Local component definitions
20
* @returns {Element} The element for method chaining
21
*/
22
Element.prototype.json2html(obj, template, options);
23
```
24
25
**Usage Examples:**
26
27
```html
28
<!DOCTYPE html>
29
<html>
30
<head>
31
<script src="json2html.js"></script>
32
</head>
33
<body>
34
<div id="container"></div>
35
<ul id="list"></ul>
36
37
<script>
38
// Append content to element
39
const container = document.getElementById('container');
40
container.json2html(
41
{ message: "Hello World" },
42
{ "<>": "p", "text": "${message}" }
43
);
44
// Appends: <p>Hello World</p>
45
46
// Prepend items to list
47
const list = document.getElementById('list');
48
list.json2html(
49
[{ name: "Item 1" }, { name: "Item 2" }],
50
{ "<>": "li", "text": "${name}" },
51
{ method: "prepend" }
52
);
53
// Prepends: <li>Item 1</li><li>Item 2</li>
54
55
// Replace element content
56
container.json2html(
57
{ title: "New Content" },
58
{ "<>": "h1", "text": "${title}" },
59
{ method: "replace" }
60
);
61
// Replaces container content with: <h1>New Content</h1>
62
</script>
63
</body>
64
</html>
65
```
66
67
### jQuery Integration
68
69
Provides jQuery plugin methods for seamless integration with jQuery-based applications and workflows.
70
71
```javascript { .api }
72
/**
73
* jQuery plugin for json2html rendering with DOM manipulation
74
* Available when jQuery is loaded before json2html
75
* @param {object|array|string} obj - JSON object, array, or JSON string to render
76
* @param {object|array} template - json2html template
77
* @param {object} [options] - Configuration options
78
* @param {string} [options.method="append"] - DOM manipulation method: "append", "prepend", or "replace"
79
* @param {object} [options.props] - Properties for template rendering
80
* @param {object} [options.components] - Local component definitions
81
* @returns {jQuery} jQuery object for chaining
82
*/
83
$.fn.json2html(obj, template, options);
84
85
/**
86
* jQuery plugin for hydrating elements with events and triggers
87
* @param {object} events - Event handlers object from iHTML rendering
88
* @param {object} triggers - Update triggers object from iHTML rendering
89
* @returns {jQuery} jQuery object for chaining
90
*/
91
$.fn.j2hHydrate(events, triggers);
92
```
93
94
**jQuery Usage Examples:**
95
96
```html
97
<!DOCTYPE html>
98
<html>
99
<head>
100
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
101
<script src="json2html.js"></script>
102
</head>
103
<body>
104
<div id="content"></div>
105
<div class="cards"></div>
106
107
<script>
108
$(document).ready(function() {
109
// Basic jQuery rendering
110
$('#content').json2html(
111
{ title: "Welcome", subtitle: "Getting started" },
112
{
113
"<>": "div",
114
"class": "header",
115
"html": [
116
{ "<>": "h1", "text": "${title}" },
117
{ "<>": "h2", "text": "${subtitle}" }
118
]
119
}
120
);
121
122
// Render multiple items to multiple elements
123
$('.cards').json2html(
124
[
125
{ title: "Card 1", content: "First card content" },
126
{ title: "Card 2", content: "Second card content" }
127
],
128
{
129
"<>": "div",
130
"class": "card",
131
"html": [
132
{ "<>": "h3", "text": "${title}" },
133
{ "<>": "p", "text": "${content}" }
134
]
135
}
136
);
137
138
// Replace content with method chaining
139
$('#content')
140
.empty()
141
.json2html(
142
{ message: "Updated content" },
143
{ "<>": "div", "class": "updated", "text": "${message}" },
144
{ method: "replace" }
145
)
146
.fadeIn();
147
});
148
</script>
149
</body>
150
</html>
151
```
152
153
### Interactive Events
154
155
Browser integration automatically handles event attachment and provides interactive functionality with embedded event handlers.
156
157
```javascript { .api }
158
/**
159
* Interactive event handling in templates
160
* Events are automatically attached when rendering with DOM methods
161
*/
162
interface InteractiveTemplate {
163
/** Click event handler */
164
"onclick"?: (event: Event) => void;
165
166
/** Change event handler for form elements */
167
"onchange"?: (event: Event) => void;
168
169
/** Mouse events */
170
"onmouseover"?: (event: Event) => void;
171
"onmouseout"?: (event: Event) => void;
172
173
/** Keyboard events */
174
"onkeyup"?: (event: Event) => void;
175
"onkeydown"?: (event: Event) => void;
176
177
/** Form events */
178
"onsubmit"?: (event: Event) => void;
179
"onfocus"?: (event: Event) => void;
180
"onblur"?: (event: Event) => void;
181
182
/** Custom json2html ready event */
183
"onready"?: (event: Event) => void;
184
185
/** Any standard DOM event */
186
[key: `on${string}`]: (event: Event) => void;
187
}
188
```
189
190
**Interactive Event Examples:**
191
192
```javascript
193
// Button with click handler
194
const template = {
195
"<>": "button",
196
"text": "Click me",
197
"onclick": function(e) {
198
e.preventDefault();
199
alert("Button clicked!");
200
console.log("Current data:", this); // Access to current data object
201
}
202
};
203
204
document.getElementById('container').json2html({}, template);
205
206
// Form with change handlers and validation
207
const formTemplate = {
208
"<>": "form",
209
"html": [
210
{
211
"<>": "input",
212
"type": "text",
213
"name": "username",
214
"value": "${username}",
215
"onchange": function(e) {
216
console.log("Username changed:", e.target.value);
217
// Validation logic
218
if (e.target.value.length < 3) {
219
e.target.style.borderColor = "red";
220
} else {
221
e.target.style.borderColor = "green";
222
}
223
}
224
},
225
{
226
"<>": "button",
227
"type": "submit",
228
"text": "Submit",
229
"onclick": function(e) {
230
e.preventDefault();
231
const form = e.target.closest('form');
232
const formData = new FormData(form);
233
console.log("Form data:", Object.fromEntries(formData));
234
}
235
}
236
]
237
};
238
239
// Ready event for initialization
240
const cardTemplate = {
241
"<>": "div",
242
"class": "card",
243
"html": { "<>": "h3", "text": "${title}" },
244
"onready": function(e) {
245
// Called when element is added to DOM
246
console.log("Card initialized:", this.title);
247
e.target.style.opacity = "0";
248
$(e.target).fadeIn(); // jQuery animation
249
}
250
};
251
```
252
253
### Two-Way Data Binding
254
255
Browser integration supports two-way data binding for form elements using the `">>"` property.
256
257
```javascript { .api }
258
/**
259
* Two-way data binding for form elements
260
* Automatically updates the source data object when form values change
261
*/
262
interface DataBindingTemplate {
263
/** Path to property for two-way binding */
264
">>"?: string;
265
266
/** Supported on input, select, and textarea elements */
267
"<>"?: "input" | "select" | "textarea";
268
}
269
```
270
271
**Data Binding Examples:**
272
273
```javascript
274
// Two-way binding with input elements
275
const userData = {
276
name: "Alice",
277
email: "alice@example.com",
278
preferences: { theme: "dark" }
279
};
280
281
const template = {
282
"<>": "form",
283
"html": [
284
{
285
"<>": "input",
286
"type": "text",
287
"value": "${name}",
288
">>": "name" // Updates userData.name on change
289
},
290
{
291
"<>": "input",
292
"type": "email",
293
"value": "${email}",
294
">>": "email" // Updates userData.email on change
295
},
296
{
297
"<>": "select",
298
">>": "preferences.theme", // Updates nested property
299
"html": [
300
{ "<>": "option", "value": "light", "text": "Light" },
301
{ "<>": "option", "value": "dark", "text": "Dark", "selected": true }
302
]
303
},
304
{
305
"<>": "button",
306
"text": "Show Data",
307
"onclick": function(e) {
308
e.preventDefault();
309
console.log("Current data:", userData);
310
// Data object is automatically updated by two-way binding
311
}
312
}
313
]
314
};
315
316
document.getElementById('form-container').json2html(userData, template);
317
```
318
319
### Dynamic Updates and Refresh
320
321
Browser integration supports dynamic component updates using trigger IDs and the refresh system.
322
323
```javascript { .api }
324
/**
325
* Dynamic update system using trigger IDs
326
* Elements can be marked for updates and refreshed programmatically
327
*/
328
interface UpdateTemplate {
329
/** Trigger ID for dynamic updates */
330
"#"?: string;
331
}
332
333
/**
334
* Trigger updates for elements with matching ID
335
* @param {string} id - Trigger ID to update
336
* @param {object} [obj] - Optional new data object
337
*/
338
function refresh(id, obj);
339
```
340
341
**Dynamic Update Examples:**
342
343
```javascript
344
// Template with update trigger
345
const counterTemplate = {
346
"<>": "div",
347
"#": "counter-display", // Trigger ID
348
"html": [
349
{ "<>": "h3", "text": "Count: ${count}" },
350
{
351
"<>": "button",
352
"text": "Increment",
353
"onclick": function(e) {
354
this.count++;
355
json2html.refresh("counter-display", this);
356
}
357
}
358
]
359
};
360
361
const counterData = { count: 0 };
362
document.getElementById('counter').json2html(counterData, counterTemplate);
363
364
// External update trigger
365
setInterval(() => {
366
counterData.count += 10;
367
json2html.refresh("counter-display", counterData);
368
}, 5000);
369
370
// Multiple elements with same trigger ID
371
const listTemplate = {
372
"<>": "li",
373
"#": "user-list",
374
"text": "${name} (${status})"
375
};
376
377
const users = [
378
{ name: "Alice", status: "online" },
379
{ name: "Bob", status: "offline" }
380
];
381
382
document.getElementById('users').json2html(users, listTemplate);
383
384
// Update all user list items
385
setTimeout(() => {
386
users.forEach(user => user.status = "online");
387
json2html.refresh("user-list", users);
388
}, 3000);
389
```
390
391
### DOM Manipulation Methods
392
393
Browser integration provides three methods for DOM content manipulation:
394
395
```javascript { .api }
396
/**
397
* DOM manipulation methods
398
*/
399
// Append: Add content to end of element (default)
400
element.json2html(data, template);
401
element.json2html(data, template, { method: "append" });
402
403
// Prepend: Add content to beginning of element
404
element.json2html(data, template, { method: "prepend" });
405
406
// Replace: Replace entire element content
407
element.json2html(data, template, { method: "replace" });
408
```
409
410
**Manipulation Method Examples:**
411
412
```html
413
<div id="container">
414
<p>Existing content</p>
415
</div>
416
417
<script>
418
const element = document.getElementById('container');
419
420
// Append (default) - adds after existing content
421
element.json2html(
422
{ message: "Appended" },
423
{ "<>": "p", "text": "${message}" }
424
);
425
// Result: <div><p>Existing content</p><p>Appended</p></div>
426
427
// Prepend - adds before existing content
428
element.json2html(
429
{ message: "Prepended" },
430
{ "<>": "p", "text": "${message}" },
431
{ method: "prepend" }
432
);
433
// Result: <div><p>Prepended</p><p>Existing content</p><p>Appended</p></div>
434
435
// Replace - replaces all content
436
element.json2html(
437
{ message: "Replaced" },
438
{ "<>": "p", "text": "${message}" },
439
{ method: "replace" }
440
);
441
// Result: <div><p>Replaced</p></div>
442
</script>
443
```