-
Notifications
You must be signed in to change notification settings - Fork 18
/
scoping-sample.html
137 lines (122 loc) · 3.92 KB
/
scoping-sample.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ko.editables sample</title>
<script src="knockout/build/output/knockout-latest.debug.js" type="text/javascript"></script>
<script src="ko.editables.js" type="text/javascript"></script>
<style type="text/css">
body, input
{
font-family: arial;
font-size: 14px;
}
.grid
{
margin-bottom: 1em;
width: 40em;
border: 1px solid silver;
background-color: White;
}
.grid th
{
text-align: left;
background-color: Black;
color: White;
}
.grid td, th
{
padding: 0.4em;
vertical-align: top;
}
.grid tr.odd
{
background-color: #DDD;
}
li
{
list-style-type: none;
margin-left: 0;
}
ul
{
margin: 0;
padding: 0;
}
fieldset
{
margin-bottom: 1em;
width: 37em;
border: 1px solid silver;
background-color: White;
padding: 1.4em;
}
fieldset legend
{
font-size: 15px;
font-weight: bold;
}
fieldset label
{
float: left;
width: 6em;
font-weight: bold;
font-size: 13px;
}
input[type="text"]
{
width: 300px;
}
</style>
</head>
<body>
<div>
<h1>Personal information:</h1>
First name: <input type="text" data-bind="value: FirstName, valueUpdate: 'afterkeydown'" /><br />
Last name: <input type="text" data-bind="value: LastName, valueUpdate: 'afterkeydown'" /><br />
Has changes: <label data-bind="text: ChangedPersonalInformation"></label>
<h1>Settings</h1>
<label><input type="checkbox" data-bind="checked: ReceiveEmails" /> Receive emails from system</label><br />
<label><input type="checkbox" data-bind="checked: ShowMyEmail" /> Show my email on the website</label><br />
Has changes: <label data-bind="text: ChangedSettings"></label>
<br />
<input type="button" data-bind="click: Save, enable: HasChanges" value="Save changes" />
<input type="button" data-bind="click: Discard, enable: HasChanges" value="Discard changes" />
</div>
<script type="text/javascript">
var ViewModel = function() {
var self = this;
self.FirstName = ko.observable().extend({editable: { scope: 'Personal' }});
self.LastName = ko.observable().extend({editable: { scope: 'Personal' }});
self.ChangedPersonalInformation = ko.computed(function() {
return ko.editable.hasChanges('Personal');
});
self.ReceiveEmails = ko.observable(false).extend({editable: { scope: 'Settings' }});
self.ShowMyEmail = ko.observable(false).extend({editable: { scope: 'Settings' }});
self.ChangedSettings = ko.computed(function() {
return ko.editable.hasChanges('Settings');
});
self.HasChanges = ko.computed(function() {
return self.ChangedSettings() || self.ChangedPersonalInformation();
});
self.Save = function() {
ko.editable.commit('Personal');
ko.editable.commit('Settings');
ko.editable.beginEdit('Personal');
ko.editable.beginEdit('Settings');
}
self.Discard = function() {
ko.editable.rollback('Personal');
ko.editable.rollback('Settings');
ko.editable.beginEdit('Personal');
ko.editable.beginEdit('Settings');
}
};
var viewModel = new ViewModel();
viewModel.FirstName('Josh');
viewModel.LastName('Pill');
ko.applyBindings(viewModel);
ko.editable.beginEdit('Personal');
ko.editable.beginEdit('Settings');
</script>
</body>
</html>