Skip to content

Commit abadf5c

Browse files
author
InfinitiesLoop
committed
Updated contacts demo, removed older demo
1 parent 79ee55e commit abadf5c

4 files changed

Lines changed: 95 additions & 191 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ Adds linkTo, linkFrom, and linkBoth plugins.
103103
Support for converters -- modify the value as it flows across the link
104104

105105
var person = {};
106-
$.fn.convertFn.round = function(value) {
106+
$.convertFn.round = function(value) {
107107
return Math.round( Math.parseFloat( value ) );
108108
}
109-
$("#name").linkTo("val", person, "age");
109+
$("#name").linkTo("val", person, "age", "round");
110110
$("#name").val("7.5");
111111
alert(person.age); // 8
112112

‎demo-contacts.html‎

Lines changed: 2 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,94 +6,7 @@
66
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
77
<script type="text/javascript" src="jquery.livelink.js"></script>
88
<script type="text/javascript" src="jquery.tmpl.js"></script>
9-
<script type="text/javascript">
10-
jQuery(function(){
11-
12-
// define some basic default data to start with
13-
var contacts = [
14-
{ firstName: "Dave", lastName: "Reed", phones: [
15-
{ type: "Mobile", number: "(555) 121-2121" },
16-
{ type: "Home", number: "(555) 123-4567" } ] },
17-
{ firstName: "Joe", lastName: "Smith", phones: [
18-
{ type: "Mobile", number: "(555) 444-2222" },
19-
{ type: "Home", number: "(555) 999-1212" } ] }
20-
];
21-
22-
// enable using 'contacts' as the name of the template
23-
$.templates.contacts = $.tmpl($("#contacttmpl").html());
24-
25-
$.extend($.convertFn, {
26-
// linking converter that normalizes phone numbers
27-
phone: function(value) {
28-
// turn a string phone number into a normalized one with dashes
29-
// and parens
30-
value = parseInt(value.replace(/[\(\)\- ]/g, ""), 10).toString();
31-
value = ("0000000000" + value).substr(-10);
32-
value = "(" + value.substr(0,3) + ") " + value.substr(3,3) + "-" + value.substr(6);
33-
return value;
34-
},
35-
fullname: function(value, settings) {
36-
return settings.source.firstName + " " + settings.source.lastName;
37-
}
38-
});
39-
40-
// show the results of the linking -- object graph is already full of the data
41-
$("#save").click(function() {
42-
$("#results").html(JSON.stringify(contacts, null, 4));
43-
});
44-
45-
// add a new contact when clicking the insert button.
46-
// notice that no code here exists that explicitly redraws
47-
// the template.
48-
$("#insert").click(function() {
49-
$.push(contacts, { firstName: "", lastName: "", phones: [] });
50-
});
51-
52-
// function that clears the current template and renders it with the
53-
// current state of the global contacts variable.
54-
function refresh() {
55-
$(".contacts").empty().append("contacts", {contacts:contacts});
56-
// bind inputs to the data items
57-
$(".contact").each(function(i) {
58-
var contact = contacts[i];
59-
$(".firstname", this).linkTo("val", contact, "firstName");
60-
$(".lastname", this).linkTo("val", contact, "lastName");
61-
$(".contact-fullname", this).linkFrom("text", contact, null, "fullname");
62-
$(".contact-remove", this).click(function() {
63-
$.splice(contacts, i, 1);
64-
});
65-
$(".phone", this).each(function(i) {
66-
var phone = contact.phones[i];
67-
$(".phone-type", this).linkTo("val", phone, "type");
68-
$(".phone-number", this).linkTo("val", phone, "number", "phone");
69-
$(".phone-remove", this).click(function() {
70-
// note: I'd like to only redraw the phones portion of the
71-
// template, but jquery.tmpl.js does not support nested templates
72-
// very easily. So here I am triggering an arrayChange event on
73-
// the main contacts array to force the entire thing to refresh.
74-
// Note that user input is not lost since the live linking has
75-
// already stored the values in the object graph.
76-
$.splice(contact.phones, i, 1);
77-
$([contacts]).trigger("arrayChange");
78-
});
79-
});
80-
$(".newphone", this).click(function() {
81-
$.push(contact.phones, { type: "", number: "" });
82-
$([contacts]).trigger("arrayChange");
83-
});
84-
});
85-
}
86-
87-
// subscribe to changes to the contact array, automatically refreshing
88-
// the rendering of the template
89-
$([contacts]).arrayChange(refresh);
90-
91-
// initial view on load
92-
refresh();
93-
94-
95-
});
96-
</script>
9+
<script type="text/javascript" src="demo-contacts.js"></script>
9710
<script id="contacttmpl" type="text/html">
9811
<tr>
9912
<th>&nbsp;</th>
@@ -138,6 +51,7 @@
13851
<table class="contacts">
13952
</table>
14053
<input type="button" id="insert" value="Insert new contact" />
54+
<input type="button" id="sort" value="Sort by Last Name" />
14155
<input type="button" id="save" value="Save contacts" />
14256

14357
<pre id="results">

‎demo-contacts.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
jQuery(function($){
2+
3+
// define some basic default data to start with
4+
var contacts = [
5+
{ firstName: "Dave", lastName: "Reed", phones: [
6+
{ type: "Mobile", number: "(555) 121-2121" },
7+
{ type: "Home", number: "(555) 123-4567" } ] },
8+
{ firstName: "John", lastName: "Doe", phones: [
9+
{ type: "Mobile", number: "(555) 444-2222" },
10+
{ type: "Home", number: "(555) 999-1212" } ] }
11+
];
12+
13+
// enable using 'contacts' as the name of the template
14+
$.templates.contacts = $.tmpl($("#contacttmpl").html());
15+
16+
$.extend($.convertFn, {
17+
// linking converter that normalizes phone numbers
18+
phone: function(value) {
19+
// turn a string phone number into a normalized one with dashes
20+
// and parens
21+
value = parseInt(value.replace(/[\(\)\- ]/g, ""), 10).toString();
22+
value = ("0000000000" + value).substr(-10);
23+
value = "(" + value.substr(0,3) + ") " + value.substr(3,3) + "-" + value.substr(6);
24+
return value;
25+
},
26+
fullname: function(value, settings) {
27+
return settings.source.firstName + " " + settings.source.lastName;
28+
}
29+
});
30+
31+
// show the results of the linking -- object graph is already full of the data
32+
$("#save").click(function() {
33+
$("#results").html(JSON.stringify(contacts, null, 4));
34+
});
35+
36+
// add a new contact when clicking the insert button.
37+
// notice that no code here exists that explicitly redraws
38+
// the template.
39+
$("#insert").click(function() {
40+
$.push(contacts, { firstName: "", lastName: "", phones: [] });
41+
});
42+
43+
$("#sort").click(function() {
44+
$.sort(contacts, function(a,b) {
45+
return a.lastName < b.lastName ? -1 : 1;
46+
});
47+
});
48+
49+
// function that clears the current template and renders it with the
50+
// current state of the global contacts variable.
51+
function refresh() {
52+
$(".contacts").empty().append("contacts", {contacts:contacts});
53+
// bind inputs to the data items
54+
$(".contact").each(function(i) {
55+
var contact = contacts[i];
56+
$(".firstname", this).linkTo("val", contact, "firstName");
57+
$(".lastname", this).linkTo("val", contact, "lastName");
58+
$(".contact-fullname", this).linkFrom("text", contact, null, "fullname");
59+
$(".contact-remove", this).click(function() {
60+
$.splice(contacts, i, 1);
61+
});
62+
$(".phone", this).each(function(i) {
63+
var phone = contact.phones[i];
64+
$(".phone-type", this).linkTo("val", phone, "type");
65+
$(".phone-number", this).linkTo("val", phone, "number", "phone");
66+
$(".phone-remove", this).click(function() {
67+
// note: I'd like to only redraw the phones portion of the
68+
// template, but jquery.tmpl.js does not support nested templates
69+
// very easily. So here I am triggering an arrayChange event on
70+
// the main contacts array to force the entire thing to refresh.
71+
// Note that user input is not lost since the live linking has
72+
// already stored the values in the object graph.
73+
$.splice(contact.phones, i, 1);
74+
$([contacts]).trigger("arrayChange");
75+
});
76+
});
77+
$(".newphone", this).click(function() {
78+
$.push(contact.phones, { type: "", number: "" });
79+
$([contacts]).trigger("arrayChange");
80+
});
81+
});
82+
}
83+
84+
// subscribe to changes to the contact array, automatically refreshing
85+
// the rendering of the template
86+
$([contacts]).arrayChange(refresh);
87+
88+
// initial view on load
89+
refresh();
90+
91+
});

‎demo.html‎

Lines changed: 0 additions & 101 deletions
This file was deleted.

0 commit comments

Comments
 (0)