@@ -2,59 +2,59 @@ jQuery( function( $ ){
22
33// define some basic default data to start with
44var contacts = [
5- { firstName : "Dave" , lastName : "Reed" , age : 32 , phones : [
6- { type : "Mobile" , number : "(555) 121-2121" } ,
7- { type : "Home" , number : "(555) 123-4567" } ] } ,
8- { firstName : "John" , lastName : "Doe" , age : 87 , phones : [
9- { type : "Mobile" , number : "(555) 444-2222" } ,
10- { type : "Home" , number : "(555) 999-1212" } ] }
5+ { firstName : "Dave" , lastName : "Reed" , age : 32 , phones : [
6+ { type : "Mobile" , number : "(555) 121-2121" } ,
7+ { type : "Home" , number : "(555) 123-4567" } ] } ,
8+ { firstName : "John" , lastName : "Doe" , age : 87 , phones : [
9+ { type : "Mobile" , number : "(555) 444-2222" } ,
10+ { type : "Home" , number : "(555) 999-1212" } ] }
1111] ;
1212
1313$ . extend ( $ . convertFn , {
14- // linking converter that normalizes phone numbers
15- phone : function ( value ) { // turn a string phone number into a normalized one with dashes
16- // and parens
17- value = ( parseInt ( value . replace ( / [ \( \) \- ] / g, "" ) , 10 ) || 0 ) . toString ( ) ;
18- value = "0000000000" + value ;
19- value = value . substr ( value . length - 10 ) ;
20- value = "(" + value . substr ( 0 , 3 ) + ") " + value . substr ( 3 , 3 ) + "-" + value . substr ( 6 ) ;
21- return value ;
22- } ,
23- fullname : function ( value , source , target ) {
24- return source . firstName + " " + source . lastName ;
25- }
14+ // linking converter that normalizes phone numbers
15+ phone : function ( value ) { // turn a string phone number into a normalized one with dashes
16+ // and parens
17+ value = ( parseInt ( value . replace ( / [ \( \) \- ] / g, "" ) , 10 ) || 0 ) . toString ( ) ;
18+ value = "0000000000" + value ;
19+ value = value . substr ( value . length - 10 ) ;
20+ value = "(" + value . substr ( 0 , 3 ) + ") " + value . substr ( 3 , 3 ) + "-" + value . substr ( 6 ) ;
21+ return value ;
22+ } ,
23+ fullname : function ( value , source , target ) {
24+ return source . firstName + " " + source . lastName ;
25+ }
2626} ) ;
2727
2828// show the results of the linking -- object graph is already full of the data
2929$ ( "#save" ) . click ( function ( ) {
30- $ ( "#results" ) . html ( JSON . stringify ( contacts , null , 4 ) ) ;
30+ $ ( "#results" ) . html ( JSON . stringify ( contacts , null , 4 ) ) ;
3131} ) ;
3232
3333// add a new contact when clicking the insert button.
3434// notice that no code here exists that explicitly redraws
3535// the template.
3636$ ( "#insert" ) . click ( function ( ) {
37- contacts . push ( { firstName : "first" , lastName : "last" , phones : [ ] , age :20 } ) ;
38- refresh ( ) ;
37+ contacts . push ( { firstName : "first" , lastName : "last" , phones : [ ] , age :20 } ) ;
38+ refresh ( ) ;
3939} ) ;
4040
4141$ ( "#sort" ) . click ( function ( ) {
42- contacts . sort ( function ( a , b ) {
43- return a . lastName < b . lastName ? - 1 : 1 ;
44- } ) ;
45- refresh ( ) ;
42+ contacts . sort ( function ( a , b ) {
43+ return a . lastName < b . lastName ? - 1 : 1 ;
44+ } ) ;
45+ refresh ( ) ;
4646} ) ;
4747
4848// function that clears the current template and renders it with the
4949// current state of the global contacts variable.
5050function refresh ( ) {
51- $ ( ".contacts" ) . empty ( ) ;
51+ $ ( ".contacts" ) . empty ( ) ;
5252 $ ( "#contacttmpl" ) . tmpl ( { contacts :contacts } ) . appendTo ( ".contacts" ) ;
53- // bind inputs to the data items
54- $ ( "tr.contact" ) . each ( function ( i ) {
55- var contact = contacts [ i ] ;
56- $ ( "input.contact" , this ) . link ( contact ) ;
57- $ ( '.agebar' , this ) . link ( contact , {
53+ // bind inputs to the data items
54+ $ ( "tr.contact" ) . each ( function ( i ) {
55+ var contact = contacts [ i ] ;
56+ $ ( "input.contact" , this ) . link ( contact ) ;
57+ $ ( '.agebar' , this ) . link ( contact , {
5858 age : {
5959 convertBack : function ( value , source , target ) {
6060 $ ( target ) . width ( value + "px" ) ;
@@ -63,45 +63,45 @@ function refresh() {
6363 } ) ;
6464 $ ( contact ) . trigger ( "changeData" , [ "age" , contact . age ] ) ;
6565
66- // todo: "update" feature
67-
68- $ ( ".contact-remove" , this ) . click ( function ( ) {
69- contacts . splice ( i , 1 ) ;
70- refresh ( ) ;
71- } ) ;
72- var original_firstName = contact . firstName ,
73- original_lastName = contact . lastName ;
74- $ ( ".contact-reset" , this ) . click ( function ( ) {
75- $ ( contact )
76- . data ( "firstName" , original_firstName )
77- . data ( "lastName" , original_lastName ) ;
78- } ) ;
79-
80- $ ( "tr.phone" , this ) . each ( function ( i ) {
81- var phone = contact . phones [ i ] ;
82- $ ( this ) . link ( phone , {
83- type : "type" ,
84- number : {
85- name : "number" ,
86- convert : "phone"
87- }
88- } ) ;
89- $ ( ".phone-remove" , this ) . click ( function ( ) {
90- // note: I'd like to only redraw the phones portion of the
91- // template, but jquery.tmpl.js does not support nested templates
92- // very easily. So here I am triggering an arrayChange event on
93- // the main contacts array to force the entire thing to refresh.
94- // Note that user input is not lost since the live linking has
95- // already stored the values in the object graph.
96- contact . phones . splice ( i , 1 ) ;
97- refresh ( ) ;
98- } ) ;
99- } ) ;
100- $ ( ".newphone" , this ) . click ( function ( ) {
101- contact . phones . push ( { type : "" , number : "" } ) ;
102- refresh ( ) ;
103- } ) ;
104- } ) ;
66+ // todo: "update" feature
67+
68+ $ ( ".contact-remove" , this ) . click ( function ( ) {
69+ contacts . splice ( i , 1 ) ;
70+ refresh ( ) ;
71+ } ) ;
72+ var original_firstName = contact . firstName ,
73+ original_lastName = contact . lastName ;
74+ $ ( ".contact-reset" , this ) . click ( function ( ) {
75+ $ ( contact )
76+ . data ( "firstName" , original_firstName )
77+ . data ( "lastName" , original_lastName ) ;
78+ } ) ;
79+
80+ $ ( "tr.phone" , this ) . each ( function ( i ) {
81+ var phone = contact . phones [ i ] ;
82+ $ ( this ) . link ( phone , {
83+ type : "type" ,
84+ number : {
85+ name : "number" ,
86+ convert : "phone"
87+ }
88+ } ) ;
89+ $ ( ".phone-remove" , this ) . click ( function ( ) {
90+ // note: I'd like to only redraw the phones portion of the
91+ // template, but jquery.tmpl.js does not support nested templates
92+ // very easily. So here I am triggering an arrayChange event on
93+ // the main contacts array to force the entire thing to refresh.
94+ // Note that user input is not lost since the live linking has
95+ // already stored the values in the object graph.
96+ contact . phones . splice ( i , 1 ) ;
97+ refresh ( ) ;
98+ } ) ;
99+ } ) ;
100+ $ ( ".newphone" , this ) . click ( function ( ) {
101+ contact . phones . push ( { type : "" , number : "" } ) ;
102+ refresh ( ) ;
103+ } ) ;
104+ } ) ;
105105}
106106
107107// initial view on load
0 commit comments