Skip to content

Commit d2e031a

Browse files
BorisMooreBorisMoore
committed
Added to Beta 2 branch:
Current Beta2 preview investigation for data link: jquery.datalink2.js, plus temporary experimental version of jquery.tmpl.js (for testing only).
1 parent fe0795d commit d2e031a

8 files changed

Lines changed: 1433 additions & 20 deletions

File tree

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Documentation for the _jQuery Data Link_ plugin can be found on the jQuery docum
88
<p>
99
==================================== WARNING ====================================<br/>
1010
<i><b>Breaking change:</b>
11-
<br />In jQuery 1.5, the behavior of $(plainObject).data() has been modified. In order to work against all versions of jQuery including jQuery 1.5,
11+
<br />In jQuery 1.5, the behavior of $(plainObject).data() has been modified. In order to work against all versions of jQuery including jQuery 1.5,
1212
current builds of jquery-datalink have therefore been modified as follows:
1313
<ul>
1414
<li>The API to modify field values is now .setField( name, value ), rather than .data( name, value ). (Examples below).</li>
@@ -39,15 +39,15 @@ $().ready(function() {
3939

4040
$("[name=name]").val("NewValue"); // Set firstName to a value.
4141
alert(person.name); // NewValue
42-
42+
4343
$(person).setField("name", "NewValue");
4444
alert($("[name=name]").val()); // NewValue
45-
45+
4646
// ... user changes value ...
4747
$("form").change(function() {
4848
// &lt;user typed value&gt;
49-
alert(person.name);
50-
});
49+
alert(person.name);
50+
});
5151
});
5252
&lt;/script>
5353

@@ -100,10 +100,10 @@ $().ready(function() {
100100
convert: "round"
101101
}
102102
});
103-
103+
104104
/* Once the user enters their age, the change event will fire which, in turn, will
105-
* cause the round function to be called. This will then round the age up or down,
106-
* set the rounded value on the object which will then cause the input field to be
105+
* cause the round function to be called. This will then round the age up or down,
106+
* set the rounded value on the object which will then cause the input field to be
107107
* updated with the new value.
108108
*/
109109
$("#age").change(function() {
@@ -157,7 +157,7 @@ $("#name").val("18");
157157
alert(person.canVote); // true
158158
</pre>
159159
<p>
160-
In this example, the converter sets two fields on the target, and neglects to return a value to cancel the default operation of setting the age field.
160+
In this example, the converter sets two fields on the target, and neglects to return a value to cancel the default operation of setting the age field.
161161
</p>
162162
<p>
163163
Converters can also be specified for the reverse process of updating the source from a change to the target. You can use this to customize the attribute used to represent the value, rather than the default of setting the 'value'.

‎beta2/datalink.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
<script id="nameTmpl" type="text/x-jquery-tmpl">
10+
<hr>
11+
<div>${firstName} ${lastName}</div>
12+
<div>${address.city}</div>
13+
</script>
14+
15+
<button onclick="setNameAndColor()">
16+
set name and color</button>
17+
<button onclick="setCity()">
18+
set city</button>
19+
<button onclick="render()">
20+
render data</button>
21+
22+
<div id="myContainer">
23+
<hr>
24+
<div data-jq-bind="css-background-color: roleColor">
25+
Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
26+
</div>
27+
<input data-jq-bind="firstName" data-jq-link="firstName">
28+
<input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
29+
<input data-jq-link="address.city" data-jq-bind="address.city" />
30+
</div>
31+
32+
<div id="result"></div>
33+
34+
<script type="text/javascript">
35+
36+
var person={
37+
firstName: "Jo",
38+
lastName: "Proctor",
39+
address: {
40+
city: "Redmond"
41+
},
42+
roleColor: "yellow"
43+
};
44+
45+
$.dataLink(person,"#myContainer").push();
46+
$.dataLink("#myContainer",person);//.push();
47+
48+
function titleConvert( value, source, path, target ) {
49+
return source.firstName + " lives in " + value;
50+
}
51+
52+
function render() {
53+
$("#nameTmpl").tmpl( person ).appendTo("#result");
54+
}
55+
56+
function setNameAndColor() {
57+
$.dataSetField( person, "lastName", "Greenford" );
58+
$.dataSetField( person, "firstName", "Elspeth" );
59+
$.dataSetField( person, "roleColor", "#8dd" );
60+
}
61+
62+
function setCity() {
63+
// Either of these will work, thanks to the binding to intermediate objects
64+
$.dataSetField( person, "address.city", person.address.city + "Xxx" );
65+
}
66+
</script>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)