-
Notifications
You must be signed in to change notification settings - Fork 1
/
Test.html
141 lines (125 loc) · 4.41 KB
/
Test.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
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
<!DOCTYPE html />
<html>
<head>
<title>XBind.js Example Page</title>
<style type="text/css">
input {
margin-bottom: 15px;
border-radius: 5px;
}
a {
text-decoration: none;
background: #6699ee;
color: #eeeeee;
padding: 4px;
border: 1px solid #888888;
border-radius: 5px;
}
a:visited {}
.error {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="XBind.js"></script>
</head>
<body>
<!--Basic Test-->
<script type="text/javascript">
// Model Type Definition
function person() {
var FName;
var LName;
var Color;
}
// Create a new Model and set the initial values
var p = new person();
p.FName = 'Nate';
p.LName = 'Zaugg';
p.Color = 2; // Green
// Data for our combobox
var colors = [];
colors.push({ name: "Blue", value: 0 });
colors.push({ name: "Black", value: 1 });
colors.push({ name: "Green", value: 2 });
colors.push({ name: "Orange", value: 3 });
// Document Ready (we have to wait for this function before we can work with UI elements)
$(document).ready(function () {
// Bind the dropdown options with jQuery
$.each(colors, function () {
$('#color').append($('<option></option>')
.attr("value", this.value)
.text(this.name));
});
// Bind the properties
p.bind({ prop: "FName", element: document.getElementById("fname") });
p.bind({ prop: "LName", element: document.getElementById("lname") });
p.bind({ prop: "Color", element: document.getElementById('color') });
// Show Name Click Handler: Demonstrates the model has actually changed along with the HTML Element
$('#show').click(function () {
alert("Hello " + p.FName + " " + p.LName + " You have " + colors[p.Color].name + " clearance!");
});
// Change Name Click Hander: Demonstrates that you can change the model and the view will reflect the changes
$('#change').click(function () {
p.FName = "Steve";
p.LName = "Jobs";
p.Color = 1; // Black
});
// New Object Click Handler: This shows that you can unbind and also setup XBind to work with jQuery and Validation
$('#newObj').click(function () {
p.unbind(); // Be kind, unbind!
p = new person();
p.FName = "Bill";
p.LName = "Gates";
p.Color = 3; // Orange
// Use jQuery getters and setters / global override
xbind.defaultget = function (element) { return $(element).val(); };
xbind.defaultset = function (element, value) { $(element).val(value); };
xbind.defaultchange = function (element, handler) { $(element).change(handler); };
xbind.defaultunbindelement = function (element) { $(element).unbind('change'); };
xbind.defaultvalidate = function (element, oldvalue, newvalue) {
var valid = $(element).val().length > 0 && $(element)[0].checkValidity();
if (!valid) {
$(element).addClass('error');
$(element).attr('title', 'This is a required field!');
} else {
$(element).removeClass('error');
$(element).attr('title', '');
}
return true;
};
// Can specify the getters and setters per binding; also shows adding a validation function
// the first name and last name fields will have different validation behavior. The first name
// will simply pop a message box and revert to the old value. The last name will add the 'error'
// class to the textbox and change the tooltip to an error message.
p.bind({
prop: "FName",
element: document.getElementById('fname'),
get: function (element) { return element.value; },
set: function (element, value) { element.value = value; },
validate: function (element, oldval, newval) {
var value = newval.length > 2;
if (!value)
alert("First Name must be at least 3 chars long!");
return value;
}
});
p.bind({ prop: "LName", element: $('#lname') });
p.bind({ prop: "Color", element: $('#color') });
});
});
</script>
<p>
<input id="fname" type=text placeholder="First Name" />
<input id="lname" type="text" placeholder="Last Name" />
<br />
<select id="color">
</select>
<br />
<br />
<a id="show" href="#">Show Name</a>
<a id="change" href="#">Change Name</a>
<a id="newObj" href="#">Create New Object</a>
</p>
</body>
</html>