Grid: Rewrite parts of todo-app and master-detail to get rid of non-observable event bindings

Author: jzaefferer

grid-editing/master-detail.html

@@ -23,27 +23,39 @@
 	var movies = store.load();
 
 	$(function() {
-		$( [ movies ] ).bind("insert remove refresh change", function(event, ui) {
-			store.save( movies );
-			$(store).trigger("update");
+		function renderList() {
+			list.empty().append( $( "#movie-list-item" ).tmpl( movies ) );
+		}
+		function bindChange( items ) {
+			$.each( items, function( index, item ) {
+				$.observable( item ).bind( "change", function() {
+					renderList();
+				});
+			});
+		}
+		$.observable( movies ).bind("insert remove replaceAll", function( event, ui ) {
+			if ( event.type === "insert" ) {
+				bindChange( ui.items );
+			}
+			store.save();
+			renderList();
 		});
+		bindChange( movies );
 
 		$(":submit").button();
 
-		var movie;
 		var editForm = $( "#editForm" ).hide().submit( function( event ) {
 			event.preventDefault();
+			var movie = $( this ).data( "movie" );
 			$.observable( movie, movies ).property( serializeForm( this ) );
 			editForm.hide();
 		});
 		var list = $("#movies-list").delegate("li:has(li)", "click", function() {
-			movie = $( this ).tmplItem().data;
+			var movie = $( this ).tmplItem().data;
+			editForm.data( "movie", movie );
 			deserializeForm( editForm, movie );
 			editForm.show();
 		});
-		$(store).bind("update", function() {
-			list.empty().append( $("#movie-list-item").tmpl( movies ) );
-		});
 
 		$("#addMovie").click(function() {
 			$.observable(movies).insert({
@@ -57,7 +69,7 @@
 
 		$("#editForm").hide();
 
-		$(store).trigger("update");
+		renderList();
 	});
 	</script>
 	<style>

grid-editing/todo-app.html

@@ -27,10 +27,13 @@
 		// TODO rewrite to do incremental rendering on each todo item
 		$.observable( todos ).bind("insert remove replaceAll", function() {
 			store.save();
+			renderList();
+		});
+		function renderList() {
 			updateAllChecked();
 			$( "#remaining" ).text( todos.length + (todos.length === 1 ? " item" : " items") + " remaining" );
 			list.empty().append( $( "#todo-list-item" ).tmpl( todos ) );
-		})
+		}
 		function update( index, checked ) {
 			todos[ index ].done = checked;
 			updateAllChecked();
@@ -80,8 +83,7 @@
 			}
 			$.observable(todos).replaceAll(todos);
 		});
-		// TODO fix this
-		$.observable( todos ).replaceAll( todos );
+		renderList();
 	});
 	</script>
 	<style>