This repository has been archived by the owner on Sep 25, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest-example.html
101 lines (96 loc) · 2.37 KB
/
test-example.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>One-way DOM Binder</title>
<style>
div.test, #mydiv {
border: 1px solid;
margin: 10px;
padding: 10px 15px;
}
[data-test]::after, [data-name]::after, [data-age]::after {
display: inline-block;
border: 1px solid blue;
color: red;
margin: 5px;
padding: 10px 15px;
}
[data-test]::after {
content: "Attribute [data-test]: " attr(data-test);
}
[data-name]::after {
content: "Attribute [data-name]: " attr(data-name);
}
[data-age]::after {
content: "Attribute [data-age]: " attr(data-age);
}
</style>
<script src="dom-binder.js"></script>
</head>
<body>
<div id="mydiv">{{date}}</div>
<div class="test">
Name: {{name}}; Age: {{age}};
<div>
Name: <b>{{name}}</b>; Age: <b>{{age}}</b>;
</div>
<div>
Name: {{name}}; Age: {{age}};
</div>
<div data-test="Name: {{name}}; Age: {{age}};"></div>
<span data-name="{{name}}" data-age="{{age}}"></span>
{{msg}}
</div>
<div class="test">
Name: {{name}}
<div data-test="{{name}}-{{age}}-test">
Welcome <b data-name="{{name}}">{{name}}</b>
</div>
{{msg}}
</div>
<div class="test late">
<h3>Later Binding</h3>
Name: {{name}}
<div data-test="{{name}}-{{age}}-test" data-info="{{info}}">
Welcome <b data-name="{{name}}">{{name}}</b>
</div>
{{msg}}
</div>
<script>
let nodes = document.querySelectorAll("div.test");
let b = new Bindable(nodes[0], nodes[1]);
b.values.age = 30;
b.values.name = 'Krishna';
b.setValues({
name: 'Anshu',
age: 100
});
{
let msg = document.createElement('span');
msg.innerHTML = 'This is a span containing the message';
b.values.msg = msg;
console.log('"b.values.msg" after first binding'.padEnd(35), b.nodes.msg);
}
let late = document.querySelector('div.late');
b.bindElements(late);
b.values.info = {a:10, b:20};
console.log('"b.values.msg" after second binding'.padEnd(35), b.nodes.msg);
b.unbindElements(nodes[0]);
console.log('"b.values.msg" after unbinding'.padEnd(35), b.nodes.msg);
let b2 = new Bindable(document.querySelector('#mydiv'));
b2.formatters.date = (value) => {
let d = Date.parse(value);
if(isNaN(d)) {
d = new Date();
}
return new Intl.DateTimeFormat('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}).format(d);
};
b2.values.date = '2019-06-05';
</script>
</body>
</html>