-
Notifications
You must be signed in to change notification settings - Fork 39
/
examples.html
76 lines (65 loc) · 2.06 KB
/
examples.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>weld - examples</title>
<script type="text/javascript" src="lib/weld.js"></script>
<script type="text/javascript">
window.onload = function() {
var getWeld = function(){
// We eat our own dogfood.
// This entire page is rendered via weld.
var page = {
pageTitle : "Weld examples",
description : "Below is a list of examples",
dogfood : "This page was rendered with weld",
example : [
{
title : 'Render an object into some elements',
markup : '<div id="example-1">\n <h1 class="title">Bunk data</h1>\n <p class="body">Bunk description</p>\n</div>',
data : '{"title" : "My first blog post!", "body" : "Hello world!"}',
code : 'weld(document.getElementById("example-1"), data)'
}
]};
weld(document.body, page);
};
var actionElements = document.getElementsByClassName('action'),
currentActionElement = actionElements.length;
// setup the onclick for all of the "weld!" links
while(currentActionElement--) {
actionElements[currentActionElement].onclick = function(e) {
getWeld();
}
}
};
</script>
</head>
<body>
<h1 class="pageTitle">Random title</h1>
<p class="description">
This is a description about this page..
</p>
<p class="dogfood">
here is some dogfood
</p>
<div class="example">
<h1 class="title">Example title</h1>
<div clas="markupContainer">
<p>Markup</p>
<pre class="markup"></pre>
</div>
<div class="dataContainer">
<p>Data</p>
<pre class="data"></pre>
</div>
<div class="codeContainer">
<p>Code</p>
<pre class="code"></pre>
</div>
<div class="resultContainer">
<p>Result (<a href="#" class="action">weld!</a>)</p>
<pre class="result"></pre>
</div>
</div>
</body>
</html>