Permalink
Browse files

Declarative and explicit linking for objects or arrays.

Collection change events
Initial integration between template rendering with annotations and
declarative data link.
  • Loading branch information...
1 parent 1b7cd73 commit 107f72f2003f49d32a3ead31bf1ce1f4ba011a74 @BorisMoore committed Mar 16, 2011
@@ -8,47 +8,41 @@
<body>
<button onclick="showData()">show data</button>
- <script id="showData" type="text/x-jquery-tmpl">
- <div>${firstName} ${lastName}</div>
- <div>${address.city}</div>
- <div>${roleColor}</div>
- </script>
-
<button onclick="setNameAndColor()">set name and color</button>
<button onclick="setCity()">set city</button>
<hr /><br />
+ <h3>Declarative</h3>
+
<div id="myDeclarative">
- <p data-jq-bind="css-background-color: roleColor">
- Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
+ <p data-jq-linkfrom="css-background-color: roleColor">
+ Name: <span data-jq-linkfrom="firstName, css-background-color: roleColor"></span> <span data-jq-linkfrom="lastName"></span>
</p>
<p>
- <input data-jq-link="firstName" data-jq-bind="firstName" />
- <input data-jq-link="lastName" data-jq-bind="lastName, title: titleConvert( address.city )" />
- <input data-jq-link="address.city" data-jq-bind="address.city" />
- <input data-jq-link="roleColor" data-jq-bind="roleColor" />
+ <input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
+ <input data-jq-linkto="lastName" data-jq-linkfrom="lastName, title: titleConvert( address.city )" />
+ <input data-jq-linkto="address.city" data-jq-linkfrom="address.city" />
+ <input data-jq-linkto="roleColor" data-jq-linkfrom="roleColor" />
</p>
<p>
- <span data-jq-bind="nameConvert( firstName )"></span>
- <span data-jq-bind="address.city"></span>
+ <span data-jq-linkfrom="nameConvert( firstName )"></span>
+ <span data-jq-linkfrom="address.city"></span>
</p>
</div>
+ <hr />
+ <h3>Explicit</h3>
+
<div id="myExplicit">
<p class="cityWrapper">
- City: <span class="city"></span>
+ City: <span data-jq-linkfrom="address.city" class="city"></span>
</p>
<p>
<input name="city" />
</p>
</div>
- <br /><hr />
- <b>Console</b>
-
- <div id="console"></div>
-
<script type="text/javascript">
var person = {
firstName: "Jo",
@@ -58,53 +52,56 @@
},
roleColor: "yellow"
},
+
person2 = {
- firstName: "Jo2",
- lastName: "Proctor2",
+ firstName: "Maria",
+ lastName: "Garcia",
address: {
- city: "Redmond2"
+ city: "Bellevue"
},
roleColor: "green"
},
+
person3 = {
- firstName: "Jo3",
- lastName: "Proctor3",
+ firstName: "Josh",
+ lastName: "Evetsky",
address: {
- city: "Redmond3"
+ city: "Seattle"
},
roleColor: "red"
};
- $.dataLink( person, "#myDeclarative" ).push();
-
+ $.dataLink( person, "#myDeclarative" ).pushValues();
+
$.dataLink( "#myDeclarative", person );
-
+
$.dataLink( person, person2 );
- $.dataLink( person, person3 ).push();
-
+
+ $.dataLink( person, person3 ).pushValues();
+
$.dataLink( person, "#myExplicit", [
- {
+ {
from: "address.city",
to: ".city"
},
- {
+ {
from: "address.city",
to: "input[name = city]"
},
- {
+ {
from: "roleColor",
to: ".cityWrapper",
toAttr: "css-background-color"
},
- {
+ {
from: "address.city",
to: "input[name = city]",
toAttr: "title",
convert: titleConvert
- }
- ]).push();
+ }
+ ]).pushValues();
- $.dataLink( "#myExplicit", person, {
+ $.dataLink( "#myExplicit", person, {
from: "input[name = city]",
to: "address.city"
});
@@ -130,6 +127,18 @@
</script>
+ <!--Console-->
+
+ <script id="showData" type="text/x-jquery-tmpl">
+ <div>${firstName} ${lastName}</div>
+ <div>${address.city}</div>
+ <div>${roleColor}</div>
+ </script>
+
+ <br /><hr />
+ <b>Console</b>
+
+ <div id="console"></div>
<script type="text/javascript">
function showData() {
$( "#console" ).append("-----------------");
@@ -0,0 +1,104 @@
+<!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>
+ <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
+ <script src="jquery.datalink2.js" type="text/javascript"></script>
+ <script src="jquery.tmpl2.js" type="text/javascript"></script>
+</head>
+<body>
+ <button onclick="showData()">show data</button>
+
+ <button onclick="setName()">set name</button>
+ <hr /><br />
+
+ <table id="myDeclarative">
+
+ <tbody><tr><td>
+
+ <h3 data-jq-linkfrom="title"></h3>
+ <input data-jq-linkto="title" data-jq-linkfrom="title" />
+
+ </td></tr></tbody>
+ <tbody data-jq-path="people">
+
+ <tr data-jq-path="0">
+ <td>
+ Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
+ </td>
+ <td>
+ <input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
+ <input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
+ </td>
+ </tr>
+
+ <tr data-jq-path="1">
+ <td>
+ Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
+ </td>
+ <td>
+ <input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
+ <input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
+ </td>
+ </tr>
+
+ <tr data-jq-path="2">
+ <td>
+ Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
+ </td>
+ <td>
+ <input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
+ <input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
+ </td>
+ </tr>
+
+ </tbody>
+
+ </table>
+
+ <script type="text/javascript">
+ var myContactList = {
+ title: "My Friends",
+ people: [
+ {
+ firstName: "Jo",
+ lastName: "Proctor"
+ },
+ person2 = {
+ firstName: "Maria",
+ lastName: "Garcia"
+ },
+ person3 = {
+ firstName: "Josh",
+ lastName: "Evetsky"
+ }
+ ]};
+
+ $.dataLink( myContactList, "#myDeclarative" ).pushValues();
+
+ $.dataLink( "#myDeclarative", myContactList );
+
+ function setName() {
+ $.setField( myContactList.people[0], "lastName", "Greenford" );
+ }
+
+ </script>
+
+ <!--Console-->
+
+ <script id="showData" type="text/x-jquery-tmpl">
+ <div>${firstName} ${lastName}</div>
+ </script>
+
+ <br /><hr />
+ <b>Console</b>
+
+ <div id="console"></div>
+<script type="text/javascript">
+ function showData() {
+ $( "#console" ).append("-----------------");
+ $( "#showData" ).tmpl( myContactList.people ).appendTo( "#console" );
+ }
+ </script>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 107f72f

Please sign in to comment.