From cf89d9dfc5b5d64332702088aa780811b9de1321 Mon Sep 17 00:00:00 2001 From: Boris Moore Date: Tue, 29 May 2012 11:40:29 -0700 Subject: [PATCH] Added 'remove' example on 'Observable collection changes' samples. Switched all samples to use $(...).on() rather thatn $(...).click() --- .../jQueryConfDemosOct2011/07_observable.html | 4 ++-- .../07_observable2.html | 24 +++++++++++++++---- .../07_observable3.html | 18 ++++++++++---- .../11_editable-data.html | 2 +- .../jQueryConfDemosOct2011/13_converters.html | 2 +- demos/step-by-step/04_editable-data.html | 2 +- .../05_server-rendered_client-activated.html | 2 +- demos/step-by-step/10_todos.html | 2 +- 8 files changed, 41 insertions(+), 15 deletions(-) diff --git a/demos/jQueryConfDemosOct2011/07_observable.html b/demos/jQueryConfDemosOct2011/07_observable.html index a54e16f..a5d5d3a 100644 --- a/demos/jQueryConfDemosOct2011/07_observable.html +++ b/demos/jQueryConfDemosOct2011/07_observable.html @@ -44,7 +44,7 @@

JsViews: Observable property changes

$.link.personTmpl( person, "#details" ); // Observable property change -$( "#changeName" ).click( function() { +$( "#changeName" ).on( "click", function() { $.observable( person ).setProperty( "firstName", person.firstName + "Plus" ); }); @@ -68,7 +68,7 @@

Script:

$.link.personTmpl( person, "#details" ); // Observable property change -$( "#changeName" ).click( function() { +$( "#changeName" ).on( "click", function() { $.observable( person ).setProperty( "firstName", person.firstName + "Plus" ); }); diff --git a/demos/jQueryConfDemosOct2011/07_observable2.html b/demos/jQueryConfDemosOct2011/07_observable2.html index d872b29..abe881c 100644 --- a/demos/jQueryConfDemosOct2011/07_observable2.html +++ b/demos/jQueryConfDemosOct2011/07_observable2.html @@ -27,6 +27,9 @@

JsViews: Observable collection changes

+ + + @@ -49,11 +52,17 @@

JsViews: Observable collection changes

// Data-link details container to people, using the personTmpl template $.link.personTmpl( people, "#details" ); -// Observable array change -$( "#insertPerson" ).click( function() { +// Observable array change: insert +$( "#insertPerson" ).on( "click", function() { $.observable( people ).insert( 0, { firstName: "NewPerson" + counter++ }); }); +// Observable array change: remove +$( "#details" ) + .on( "click", ".close", function() { + $.observable( people ).remove( $.view( this ).index, 1 ); + }); + @@ -72,10 +81,17 @@

Script:

 $.link.personTmpl( people, "#details" );
 
-// Observable array change
-$( "#insertPerson" ).click( function() {
+// Observable array change: insert
+$( "#insertPerson" ).on( "click", function() {
     $.observable( people ).insert( 0, { firstName: "NewPerson" + counter++ });
 });
+
+// Observable array change: remove
+$( "#details" )
+    .on( "click", ".close", function() {
+        $.observable( people ).remove( $.view( this ).index, 1 );
+    });
+
diff --git a/demos/jQueryConfDemosOct2011/07_observable3.html b/demos/jQueryConfDemosOct2011/07_observable3.html index 3c8f2b7..2505281 100644 --- a/demos/jQueryConfDemosOct2011/07_observable3.html +++ b/demos/jQueryConfDemosOct2011/07_observable3.html @@ -36,6 +36,9 @@

JsViews: Two containers data-linked to the same array

+ + + @@ -63,15 +66,22 @@

JsViews: Two containers data-linked to the same array

$.link.personTmpl2( people, "#details2" ); // Observable array change: insert two new people -$( "#insertPerson" ).click( function() { +$( "#insertPerson" ).on( "click", function() { + var insertAt = people.length ? 1 : 0; $.observable( people ).insert( - 1, // insert at index 1 + insertAt, // insert at index 1 [ { firstName: "NewPerson" + counter++ }, { firstName: "NewPerson" + counter++ } ]); }); +// Observable array change: remove +$( "#details2" ) + .on( "click", ".close", function() { + $.observable( people ).remove( $.view( this ).index, 1 ); + }); + @@ -83,9 +93,9 @@

Script:

$.link.personTmpl2( people, "#details2" ); // Observable array change: insert two new people at index 1 -$( "#insertPerson" ).click( function() { +$( "#insertPerson" ).on( "click", function() { $.observable( people ).insert( - 1, // index 1 + 1, // index 1 [ // add two new people { firstName: "NewPerson" }, { firstName: "NewPerson2" } diff --git a/demos/jQueryConfDemosOct2011/11_editable-data.html b/demos/jQueryConfDemosOct2011/11_editable-data.html index 3d4a208..23bdab9 100644 --- a/demos/jQueryConfDemosOct2011/11_editable-data.html +++ b/demos/jQueryConfDemosOct2011/11_editable-data.html @@ -113,7 +113,7 @@

JsViews: Fully editable data: JsViews

return false; }); - $( "#addMovieBtn" ).click( function() { + $( "#addMovieBtn" ).on( "click", function() { $.observable( movies ).insert( movies.length, { title: "NewTitle" + counter, languages: [ diff --git a/demos/jQueryConfDemosOct2011/13_converters.html b/demos/jQueryConfDemosOct2011/13_converters.html index c51bb6b..10a88da 100644 --- a/demos/jQueryConfDemosOct2011/13_converters.html +++ b/demos/jQueryConfDemosOct2011/13_converters.html @@ -73,7 +73,7 @@

JsRender and JsViews: Use converters for custom encoding, data formatting, l }); // Observable property change -$( "#changeDay" ).click( function() { +$( "#changeDay" ).on( "click", function() { var dayOff = myWeek.dayOff; $.observable( myWeek ).setProperty( "dayOff", dayOff < 6 ? dayOff + 1 : 0); }); diff --git a/demos/step-by-step/04_editable-data.html b/demos/step-by-step/04_editable-data.html index 73ebd33..be4c59d 100644 --- a/demos/step-by-step/04_editable-data.html +++ b/demos/step-by-step/04_editable-data.html @@ -101,7 +101,7 @@

Fully editable data: Change events with integrated Data-Link and TemplatesServer rendered content, activated in client. With client data 'delta'...Todos

} }); - $( ".todo-clear" ).click( function() { todos.clearCompleted(); }); + $( ".todo-clear" ).on( "click", function() { todos.clearCompleted(); }); // Link UI, and handle changes to 'done' and 'content' properties of Todo items $.link( todos, "#todo-stats" );