Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 156 lines (130 sloc) 3.787 kb
d2e031a @BorisMoore Added to Beta 2 branch:
authored
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>
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
9 <button onclick="showData()">show data</button>
10
11 <button onclick="setNameAndColor()">set name and color</button>
12 <button onclick="setCity()">set city</button>
13 <hr /><br />
d2e031a @BorisMoore Added to Beta 2 branch:
authored
14
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
15 <h3>Declarative</h3>
16
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
17 <div id="myDeclarative">
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
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>
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
20 </p>
21 <p>
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
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" />
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
26 </p>
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
27 <p>
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
28 <span data-jq-linkfrom="nameConvert( firstName )"></span>
29 <span data-jq-linkfrom="address.city"></span>
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
30 </p>
31
32 </div>
33
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
34 <hr />
35 <h3>Explicit</h3>
36
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
37 <div id="myExplicit">
38 <p class="cityWrapper">
b8fbc3c @BorisMoore Added support for automatic unlinking through override of cleanData, and
authored
39 City: <span class="city"></span>
40 City: <span class="city"></span>
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
41 </p>
42 <p>
43 <input name="city" />
44 </p>
d2e031a @BorisMoore Added to Beta 2 branch:
authored
45 </div>
46
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
47 <script type="text/javascript">
48 var person = {
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
49 firstName: "Jo",
50 lastName: "Proctor",
51 address: {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
52 city: "Redmond"
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
53 },
54 roleColor: "yellow"
d2e031a @BorisMoore Added to Beta 2 branch:
authored
55 },
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
56
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
57 person2 = {
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
58 firstName: "Maria",
59 lastName: "Garcia",
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
60 address: {
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
61 city: "Bellevue"
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
62 },
63 roleColor: "green"
64 },
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
65
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
66 person3 = {
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
67 firstName: "Josh",
68 lastName: "Evetsky",
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
69 address: {
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
70 city: "Seattle"
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
71 },
72 roleColor: "red"
73 };
d2e031a @BorisMoore Added to Beta 2 branch:
authored
74
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
75 $.dataLink( person, "#myDeclarative" ).pushValues();
76
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
77 $.dataLink( "#myDeclarative", person );
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
78
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
79 $.dataLink( person, person2 );
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
80
81 $.dataLink( person, person3 ).pushValues();
82
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
83 $.dataLink( person, "#myExplicit", [
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
84 {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
85 from: "address.city",
86 to: ".city"
87 },
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
88 {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
89 from: "address.city",
90 to: "input[name = city]"
91 },
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
92 {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
93 from: "roleColor",
94 to: ".cityWrapper",
95 toAttr: "css-background-color"
96 },
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
97 {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
98 from: "address.city",
99 to: "input[name = city]",
100 toAttr: "title",
101 convert: titleConvert
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
102 }
103 ]).pushValues();
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
104
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
105 $.dataLink( "#myExplicit", person, {
1b7cd73 @BorisMoore Made datalink.html show more aspects of API.
authored
106 from: "input[name = city]",
107 to: "address.city"
108 });
109
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
110 function nameConvert( value ) {
111 return value + " lives in";
112 }
d2e031a @BorisMoore Added to Beta 2 branch:
authored
113
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
114 function titleConvert( value, source, path, target, map ) {
d2e031a @BorisMoore Added to Beta 2 branch:
authored
115 return source.firstName + " lives in " + value;
116 }
117
118 function setNameAndColor() {
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
119 $.setField( person, "lastName", "Greenford" );
120 $.setField( person, "firstName", "Elspeth" );
121 $.setField( person, "roleColor", "#8dd" );
d2e031a @BorisMoore Added to Beta 2 branch:
authored
122 }
123
124 function setCity() {
125 // Either of these will work, thanks to the binding to intermediate objects
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
126 $.setField( person, "address.city", person.address.city + "Xxx" );
d2e031a @BorisMoore Added to Beta 2 branch:
authored
127 }
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
128
d2e031a @BorisMoore Added to Beta 2 branch:
authored
129 </script>
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
130
107f72f @BorisMoore Declarative and explicit linking for objects or arrays.
authored
131 <!--Console-->
132
133 <script id="showData" type="text/x-jquery-tmpl">
134 <div>${firstName} ${lastName}</div>
135 <div>${address.city}</div>
136 <div>${roleColor}</div>
137 </script>
138
139 <br /><hr />
140 <b>Console</b>
141
142 <div id="console"></div>
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
143 <script type="text/javascript">
144 function showData() {
145 $( "#console" ).append("-----------------");
146 $( "#showData" ).tmpl( person ).appendTo( "#console" );
a4a4636 @BorisMoore Work on declarative linking from html to object, and from object to o…
authored
147 $( "#console" ).append("-----------------");
148 $( "#showData" ).tmpl( person2 ).appendTo( "#console" );
149 $( "#console" ).append("-----------------");
150 $( "#showData" ).tmpl( person3 ).appendTo( "#console" );
f1c9b6b @BorisMoore Added initial demo for template integration with data link
authored
151 }
152 </script>
153
d2e031a @BorisMoore Added to Beta 2 branch:
authored
154 </body>
155 </html>
Something went wrong with that request. Please try again.