Added 'remove' example on 'Observable collection changes' samples.

Switched all samples to use $(...).on() rather thatn $(...).click()
BorisMoore · May 29, 2012 · cf89d9d · cf89d9d
1 parent 16fea05
commit cf89d9d
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 15 deletions.
diff --git a/demos/jQueryConfDemosOct2011/07_observable.html b/demos/jQueryConfDemosOct2011/07_observable.html
@@ -44,7 +44,7 @@ <h3>JsViews: Observable property changes</h3>
 $.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 @@ <h4>Script:</h4>
 $.link.personTmpl( person, "#details" );
 
 // Observable property change
-$( "#changeName" ).click( function() {
+$( "#changeName" ).on( "click", function() {
     $.observable( person ).setProperty( "firstName", person.firstName + "Plus" );
 });
 </pre>

diff --git a/demos/jQueryConfDemosOct2011/07_observable2.html b/demos/jQueryConfDemosOct2011/07_observable2.html
@@ -27,6 +27,9 @@ <h3>JsViews: Observable collection changes</h3>
 		<td>
 			<input data-link="firstName" />
 		</td>
+		<td>
+			<img class="close" src="../resources/close.png" />
+		</td>
 	</tr>
 </script>
 
@@ -49,11 +52,17 @@ <h3>JsViews: Observable collection changes</h3>
 // 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 );
+	});
+
 </script>
 
 <!--================ End of Demo Section ================-->
@@ -72,10 +81,17 @@ <h4>Script:</h4>
 <pre class="brush: js;">
 $.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 );
+    });
+
 </pre>
 </body>
 </html>

diff --git a/demos/jQueryConfDemosOct2011/07_observable3.html b/demos/jQueryConfDemosOct2011/07_observable3.html
@@ -36,6 +36,9 @@ <h3>JsViews: Two containers data-linked to the same array</h3>
 		<td>
 			<input data-link="firstName" />
 		</td>
+		<td>
+			<img class="close" src="../resources/close.png" />
+		</td>
 	</tr>
 </script>
 
@@ -63,15 +66,22 @@ <h3>JsViews: Two containers data-linked to the same array</h3>
 $.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 );
+	});
+
 </script>
 
 <!--================ End of Demo Section ================-->
@@ -83,9 +93,9 @@ <h4>Script:</h4>
 $.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
@@ -113,7 +113,7 @@ <h3>JsViews: Fully editable data: JsViews</h3>
 			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
@@ -73,7 +73,7 @@ <h3>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
@@ -101,7 +101,7 @@ <h3>Fully editable data: Change events with integrated Data-Link and Templates</
 			return false;
 		});
 
-	$( "#addMovieBtn" ).click( function() {
+	$( "#addMovieBtn" ).on( "click", function() {
 		$.observable( movies ).insert( movies.length, {
 			title: "NewTitle" + counter ,
 			languages: [

diff --git a/demos/step-by-step/05_server-rendered_client-activated.html b/demos/step-by-step/05_server-rendered_client-activated.html
@@ -156,7 +156,7 @@ <h3>Server rendered content, activated in client. With client data 'delta'...</h
 				return false;
 			});
 
-		$( "#addMovieBtn" ).click( function() {
+		$( "#addMovieBtn" ).on( "click", function() {
 			$.observable( movies ).insert( movies.length, {
 				title: "NewTitle" + counter,
 				languages: [

diff --git a/demos/step-by-step/10_todos.html b/demos/step-by-step/10_todos.html
@@ -128,7 +128,7 @@ <h1>Todos</h1>
 		}
 	});
 
-	$( ".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" );