-
Notifications
You must be signed in to change notification settings - Fork 3
/
example.html
148 lines (130 loc) · 4.96 KB
/
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
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
140
141
142
143
144
145
146
147
148
<html>
<head>
</head>
<body>
<script src="libs/knockout-2.3.0.min.js" type="text/javascript"></script>
<script src="src/knockout.merge.js" type="text/javascript"></script>
<style>
.output-data
{
display: block;
}
.output-data div
{
display: inline-block;
margin-right: 5px;
}
</style>
<div id="simple-example-container">
<h2>Simple example</h2>
<p>In the source code you will see a model called <strong>Person</strong> which has a firstname and surname, click the button below to merge json into the model</p>
<button id="simple-merger-button" data-bind="click: MergeSimpleExample">Merge Simple Data</button>
<div class="output-data">
<div data-bind="text: SimpleExampleModel.Firstname"></div>
<div data-bind="text: SimpleExampleModel.Surname"></div>
</div>
</div>
<div id="complex-example-container">
<h2>Complex example</h2>
<p>In the source code you will see a model called <strong>Employee</strong> which has an id and a person object, click the button below to merge json into the model</p>
<button id="complex-merger-button" data-bind="click: MergeComplexExample">Merge Complex Data</button>
<div class="output-data">
<div data-bind="text: ComplexExampleModel.Id"></div>
<div data-bind="text: ComplexExampleModel.Person.Firstname"></div>
<div data-bind="text: ComplexExampleModel.Person.Surname"></div>
</div>
</div>
<div id="nested-example-container">
<h2>Nested example</h2>
<p>In the source code you will see a model called <strong>EmployeeGroup</strong> which has an id, name and an array of employees. Click the button below to merge json into the model</p>
<button id="nested-merger-button" data-bind="click: MergeNestedExample">Merge Nested Data</button>
<div class="output-data">
<div data-bind="text: NestedExampleModel.GroupId"></div>
<div data-bind="text: NestedExampleModel.GroupName"></div>
</br>
<div class="output-data" data-bind="foreach: NestedExampleModel.GroupMembers">
</br>
<div class="output-data">
<div data-bind="text: Id"></div>
<div data-bind="text: Person.Firstname"></div>
<div data-bind="text: Person.Surname"></div>
</div>
</div>
</div>
</div>
<div id="custom-rule-example-container">
<h2>Custom rule example</h2>
<p>In the source code you will see a model called <strong>CustomRuleObject</strong> which has a date field.</p>
<p>If you click the button below to merge json into the model, it will merge the element as a Date object not a string, using custom rules</p>
<button id="custom-rule-merger-button" data-bind="click: MergeCustomRuleExample">Merge Custom Rule Data</button>
<div class="output-data">
<div data-bind="text: CustomRuleExampleModel.Date"></div>
<p>Also just to prove its a date and not a string inside the observable, here is its unix epoch version</p>
<div data-bind="text: CustomRuleExampleModel.Date().getTime()"></div>
</div>
</div>
<script>
function Person()
{
this.Firstname = ko.observable();
this.Surname = ko.observable();
}
function Employee()
{
this.Id = ko.observable();
this.Person = new Person();
}
function EmployeeGroup()
{
this.GroupId = ko.observable();
this.GroupName = ko.observable();
this.GroupMembers = ko.observableArray().withMergeConstructor(Employee);
}
function CustomRuleObject()
{
this.Date = ko.observable(new Date(0)).withMergeRule("Date");
}
function ViewModel()
{
this.SimpleExampleModel = new Person();
this.ComplexExampleModel = new Employee();
this.NestedExampleModel = new EmployeeGroup();
this.CustomRuleExampleModel = new CustomRuleObject();
this.MergeSimpleExample = function() {
var personJson = { Firstname: "James", Surname: "Bond" };
ko.merge.fromJS(this.SimpleExampleModel, personJson);
};
this.MergeComplexExample = function() {
var employeeJson = {
Id: 1,
Person: { Firstname: "James", Surname: "Bond" }
};
ko.merge.fromJS(this.ComplexExampleModel, employeeJson);
};
this.MergeNestedExample = function() {
var groupJson = {
GroupId: 1,
GroupName: "Generic Company",
GroupMembers: [
{ Id: 1, Person: { Firstname: "James", Surname: "Bond" } },
{ Id: 2, Person: { Firstname: "The", Surname: "Terminator" } },
{ Id: 3, Person: { Firstname: "Some", Surname: "Guy" } },
]
};
ko.merge.fromJS(this.NestedExampleModel, groupJson);
};
this.MergeCustomRuleExample = function() {
var json = {
Date: "05/05/2015"
};
ko.merge.fromJS(this.CustomRuleExampleModel, json);
};
};
// Example of using custom rules
ko.merge.rules["Date"] = function(knockoutElement, dataElement) {
knockoutElement(new Date(dataElement));
};
ko.applyBindings(new ViewModel());
</script>
</body>
</html>