Skip to content
This repository was archived by the owner on Jan 16, 2020. It is now read-only.

Commit 107f72f

Browse files
BorisMooreBorisMoore
committed
Declarative and explicit linking for objects or arrays.
Collection change events Initial integration between template rendering with annotations and declarative data link.
1 parent 1b7cd73 commit 107f72f

File tree

7 files changed

+647
-254
lines changed

7 files changed

+647
-254
lines changed

‎beta2/datalink.html renamed to ‎beta2/1explicitOrDeclarative.html

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,41 @@
88
<body>
99
<button onclick="showData()">show data</button>
1010

11-
<script id="showData" type="text/x-jquery-tmpl">
12-
<div>${firstName} ${lastName}</div>
13-
<div>${address.city}</div>
14-
<div>${roleColor}</div>
15-
</script>
16-
1711
<button onclick="setNameAndColor()">set name and color</button>
1812
<button onclick="setCity()">set city</button>
1913
<hr /><br />
2014

15+
<h3>Declarative</h3>
16+
2117
<div id="myDeclarative">
22-
<p data-jq-bind="css-background-color: roleColor">
23-
Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
18+
<p data-jq-linkfrom="css-background-color: roleColor">
19+
Name: <span data-jq-linkfrom="firstName, css-background-color: roleColor"></span> <span data-jq-linkfrom="lastName"></span>
2420
</p>
2521
<p>
26-
<input data-jq-link="firstName" data-jq-bind="firstName" />
27-
<input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
28-
<input data-jq-link="address.city" data-jq-bind="address.city" />
29-
<input data-jq-link="roleColor" data-jq-bind="roleColor" />
22+
<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
23+
<input data-jq-linkto="lastName" data-jq-linkfrom="lastName, title: titleConvert( address.city )" />
24+
<input data-jq-linkto="address.city" data-jq-linkfrom="address.city" />
25+
<input data-jq-linkto="roleColor" data-jq-linkfrom="roleColor" />
3026
</p>
3127
<p>
32-
<span data-jq-bind="nameConvert( firstName )"></span>
33-
<span data-jq-bind="address.city"></span>
28+
<span data-jq-linkfrom="nameConvert( firstName )"></span>
29+
<span data-jq-linkfrom="address.city"></span>
3430
</p>
3531

3632
</div>
3733

34+
<hr />
35+
<h3>Explicit</h3>
36+
3837
<div id="myExplicit">
3938
<p class="cityWrapper">
40-
City: <span class="city"></span>
39+
City: <span data-jq-linkfrom="address.city" class="city"></span>
4140
</p>
4241
<p>
4342
<input name="city" />
4443
</p>
4544
</div>
4645

47-
<br /><hr />
48-
<b>Console</b>
49-
50-
<div id="console"></div>
51-
5246
<script type="text/javascript">
5347
var person = {
5448
firstName: "Jo",
@@ -58,53 +52,56 @@
5852
},
5953
roleColor: "yellow"
6054
},
55+
6156
person2 = {
62-
firstName: "Jo2",
63-
lastName: "Proctor2",
57+
firstName: "Maria",
58+
lastName: "Garcia",
6459
address: {
65-
city: "Redmond2"
60+
city: "Bellevue"
6661
},
6762
roleColor: "green"
6863
},
64+
6965
person3 = {
70-
firstName: "Jo3",
71-
lastName: "Proctor3",
66+
firstName: "Josh",
67+
lastName: "Evetsky",
7268
address: {
73-
city: "Redmond3"
69+
city: "Seattle"
7470
},
7571
roleColor: "red"
7672
};
7773

78-
$.dataLink( person, "#myDeclarative" ).push();
79-
74+
$.dataLink( person, "#myDeclarative" ).pushValues();
75+
8076
$.dataLink( "#myDeclarative", person );
81-
77+
8278
$.dataLink( person, person2 );
83-
$.dataLink( person, person3 ).push();
84-
79+
80+
$.dataLink( person, person3 ).pushValues();
81+
8582
$.dataLink( person, "#myExplicit", [
86-
{
83+
{
8784
from: "address.city",
8885
to: ".city"
8986
},
90-
{
87+
{
9188
from: "address.city",
9289
to: "input[name = city]"
9390
},
94-
{
91+
{
9592
from: "roleColor",
9693
to: ".cityWrapper",
9794
toAttr: "css-background-color"
9895
},
99-
{
96+
{
10097
from: "address.city",
10198
to: "input[name = city]",
10299
toAttr: "title",
103100
convert: titleConvert
104-
}
105-
]).push();
101+
}
102+
]).pushValues();
106103

107-
$.dataLink( "#myExplicit", person, {
104+
$.dataLink( "#myExplicit", person, {
108105
from: "input[name = city]",
109106
to: "address.city"
110107
});
@@ -130,6 +127,18 @@
130127

131128
</script>
132129

130+
<!--Console-->
131+
132+
<script id="showData" type="text/x-jquery-tmpl">
133+
<div>${firstName} ${lastName}</div>
134+
<div>${address.city}</div>
135+
<div>${roleColor}</div>
136+
</script>
137+
138+
<br /><hr />
139+
<b>Console</b>
140+
141+
<div id="console"></div>
133142
<script type="text/javascript">
134143
function showData() {
135144
$( "#console" ).append("-----------------");

‎beta2/2hierarchical.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
5+
<script src="jquery.datalink2.js" type="text/javascript"></script>
6+
<script src="jquery.tmpl2.js" type="text/javascript"></script>
7+
</head>
8+
<body>
9+
<button onclick="showData()">show data</button>
10+
11+
<button onclick="setName()">set name</button>
12+
<hr /><br />
13+
14+
<table id="myDeclarative">
15+
16+
<tbody><tr><td>
17+
18+
<h3 data-jq-linkfrom="title"></h3>
19+
<input data-jq-linkto="title" data-jq-linkfrom="title" />
20+
21+
</td></tr></tbody>
22+
<tbody data-jq-path="people">
23+
24+
<tr data-jq-path="0">
25+
<td>
26+
Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
27+
</td>
28+
<td>
29+
<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
30+
<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
31+
</td>
32+
</tr>
33+
34+
<tr data-jq-path="1">
35+
<td>
36+
Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
37+
</td>
38+
<td>
39+
<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
40+
<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
41+
</td>
42+
</tr>
43+
44+
<tr data-jq-path="2">
45+
<td>
46+
Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
47+
</td>
48+
<td>
49+
<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
50+
<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
51+
</td>
52+
</tr>
53+
54+
</tbody>
55+
56+
</table>
57+
58+
<script type="text/javascript">
59+
var myContactList = {
60+
title: "My Friends",
61+
people: [
62+
{
63+
firstName: "Jo",
64+
lastName: "Proctor"
65+
},
66+
person2 = {
67+
firstName: "Maria",
68+
lastName: "Garcia"
69+
},
70+
person3 = {
71+
firstName: "Josh",
72+
lastName: "Evetsky"
73+
}
74+
]};
75+
76+
$.dataLink( myContactList, "#myDeclarative" ).pushValues();
77+
78+
$.dataLink( "#myDeclarative", myContactList );
79+
80+
function setName() {
81+
$.setField( myContactList.people[0], "lastName", "Greenford" );
82+
}
83+
84+
</script>
85+
86+
<!--Console-->
87+
88+
<script id="showData" type="text/x-jquery-tmpl">
89+
<div>${firstName} ${lastName}</div>
90+
</script>
91+
92+
<br /><hr />
93+
<b>Console</b>
94+
95+
<div id="console"></div>
96+
<script type="text/javascript">
97+
function showData() {
98+
$( "#console" ).append("-----------------");
99+
$( "#showData" ).tmpl( myContactList.people ).appendTo( "#console" );
100+
}
101+
</script>
102+
103+
</body>
104+
</html>

0 commit comments

Comments
 (0)