Skip to content

Commit 8e53293

Browse files
BorisMooreBorisMoore
committed
Removed the out-of-date version of jquery.tmpl.
Updated demo to use the jquery.tmpl beta here: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js. Moved the demo into a subfolder. Fixed bug which caused error when adding new contact.
1 parent 06f116d commit 8e53293

4 files changed

Lines changed: 40 additions & 172 deletions

File tree

demo-contacts.css renamed to demos/demo-contacts.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ http://veerle.duoh.com/blog/comments/a_css_styled_table/
66
color: #6D929B;
77
}
88
.contacts {
9-
border: 1px solid #C1DAD7
9+
border: 1px solid #C1DAD7;
10+
margin:20px;
1011
}
1112
.contacts td {
1213
border-right: 1px solid #C1DAD7;

demo-contacts.html renamed to demos/demo-contacts.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
<head>
44
<title>My Contacts - Linking Demo</title>
55
<link type="text/css" rel="Stylesheet" href="demo-contacts.css" />
6-
<script type="text/javascript" src="jquery.js"></script>
7-
<script type="text/javascript" src="jquery.datalink.js"></script>
8-
<script type="text/javascript" src="jquery.tmpl.js"></script>
6+
<script type="text/javascript" src="../jquery.js"></script>
7+
<script type="text/javascript" src="../jquery.datalink.js"></script>
8+
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
99
<script type="text/javascript" src="demo-contacts.js"></script>
10-
<script id="contacttmpl" type="text/html">
10+
<script id="contacttmpl" type="text/x-jquery-tmpl">
1111
<tr>
1212
<th>&nbsp;</th>
1313
<th>First Name</th>
1414
<th>Last Name</th>
1515
<th>Phone Numbers</th>
1616
<th>Age</th>
1717
</tr>
18-
{{each(i,contact) contacts}}
18+
{{each contacts}}
1919
<tr class="contact">
2020
<td>
2121
<a href="#" class="contact-remove">remove</a><br/>
@@ -32,7 +32,7 @@
3232
<th>Type</th>
3333
<th>Number</th>
3434
</tr>
35-
{{each(i,city) phones}}
35+
{{each phones}}
3636
<tr class="phone">
3737
<td><a href="#" class="phone-remove">remove</td>
3838
<td><input class="phone phone-type" name="type" type="text" value="${type}" /></td>

demo-contacts.js renamed to demos/demo-contacts.js

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
jQuery(function($){
1+
jQuery( function( $ ){
22

33
// define some basic default data to start with
44
var contacts = [
@@ -10,39 +10,36 @@ var contacts = [
1010
{ type: "Home", number: "(555) 999-1212" } ] }
1111
];
1212

13-
// enable using 'contacts' as the name of the template
14-
$.templates.contacts = $.tmpl($("#contacttmpl").html());
15-
16-
$.extend($.convertFn, {
13+
$.extend( $.convertFn, {
1714
// linking converter that normalizes phone numbers
18-
phone: function(value) {// turn a string phone number into a normalized one with dashes
15+
phone: function( value ) {// turn a string phone number into a normalized one with dashes
1916
// and parens
20-
value = (parseInt(value.replace(/[\(\)\- ]/g, ""), 10) || 0).toString();
17+
value = (parseInt( value.replace( /[\(\)\- ]/g, "" ), 10 ) || 0 ).toString();
2118
value = "0000000000" + value;
22-
value = value.substr(value.length - 10);
23-
value = "(" + value.substr(0,3) + ") " + value.substr(3,3) + "-" + value.substr(6);
19+
value = value.substr( value.length - 10 );
20+
value = "(" + value.substr( 0, 3 ) + ") " + value.substr( 3, 3 ) + "-" + value.substr( 6 );
2421
return value;
2522
},
26-
fullname: function(value, source, target) {
23+
fullname: function( value, source, target ) {
2724
return source.firstName + " " + source.lastName;
2825
}
2926
});
3027

3128
// 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));
29+
$( "#save" ).click( function() {
30+
$( "#results" ).html( JSON.stringify( contacts, null, 4 ));
3431
});
3532

3633
// add a new contact when clicking the insert button.
3734
// notice that no code here exists that explicitly redraws
3835
// the template.
39-
$("#insert").click(function() {
40-
contacts.push({ firstName: "", lastName: "", phones: [] });
36+
$( "#insert" ).click( function() {
37+
contacts.push({ firstName: "first", lastName: "last", phones: [], age:20 });
4138
refresh();
4239
});
4340

44-
$("#sort").click(function() {
45-
contacts.sort(function(a,b) {
41+
$( "#sort" ).click( function() {
42+
contacts.sort( function( a, b ) {
4643
return a.lastName < b.lastName ? -1 : 1;
4744
});
4845
refresh();
@@ -51,55 +48,56 @@ $("#sort").click(function() {
5148
// function that clears the current template and renders it with the
5249
// current state of the global contacts variable.
5350
function refresh() {
54-
$(".contacts").empty().append("contacts", {contacts:contacts});
51+
$( ".contacts" ).empty();
52+
$( "#contacttmpl" ).tmpl( {contacts:contacts} ).appendTo( ".contacts" );
5553
// bind inputs to the data items
56-
$("tr.contact").each(function(i) {
54+
$( "tr.contact" ).each( function(i) {
5755
var contact = contacts[i];
58-
$("input.contact", this).link(contact);
59-
$('.agebar', this).link(contact, {
56+
$( "input.contact", this ).link( contact );
57+
$( '.agebar', this ).link( contact, {
6058
age: {
61-
convertBack: function(value, source, target) {
62-
$(target).width(value + "px");
59+
convertBack: function( value, source, target ) {
60+
$( target ).width( value + "px" );
6361
}
6462
}
6563
});
66-
$(contact).trigger("changeData", ["age", contact.age]);
64+
$( contact ).trigger( "changeData", ["age", contact.age] );
6765

6866
// todo: "update" feature
6967

70-
$(".contact-remove", this).click(function() {
71-
contacts.splice(i, 1);
68+
$( ".contact-remove", this ).click( function() {
69+
contacts.splice( i, 1 );
7270
refresh();
7371
});
7472
var original_firstName = contact.firstName,
7573
original_lastName = contact.lastName;
76-
$(".contact-reset", this).click(function() {
77-
$(contact)
78-
.data("firstName", original_firstName)
79-
.data("lastName", original_lastName);
74+
$( ".contact-reset", this ).click( function() {
75+
$( contact )
76+
.data( "firstName", original_firstName )
77+
.data( "lastName", original_lastName );
8078
});
8179

82-
$("tr.phone", this).each(function(i) {
80+
$( "tr.phone", this ).each( function(i) {
8381
var phone = contact.phones[i];
84-
$(this).link(phone, {
82+
$( this ).link( phone, {
8583
type: "type",
8684
number: {
8785
name: "number",
8886
convert: "phone"
8987
}
9088
});
91-
$(".phone-remove", this).click(function() {
89+
$( ".phone-remove", this ).click( function() {
9290
// note: I'd like to only redraw the phones portion of the
9391
// template, but jquery.tmpl.js does not support nested templates
9492
// very easily. So here I am triggering an arrayChange event on
9593
// the main contacts array to force the entire thing to refresh.
9694
// Note that user input is not lost since the live linking has
9795
// already stored the values in the object graph.
98-
contact.phones.splice(i, 1);
96+
contact.phones.splice( i, 1 );
9997
refresh();
10098
});
10199
});
102-
$(".newphone", this).click(function() {
100+
$( ".newphone", this ).click( function() {
103101
contact.phones.push({ type: "", number: "" });
104102
refresh();
105103
});

‎jquery.tmpl.js‎

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

0 commit comments

Comments
 (0)