Extracted table data extractor from grid.js into a custom datasource.

Author: jzaefferer

grid-datamodel/data.html

@@ -11,6 +11,7 @@
 	<script src="../ui/jquery.ui.widget.js"></script>
 	<script src="dataitem.js"></script>
 	<script src="datasource.js"></script>
+	<script src="extractor-datasource.js"></script>
 	<script src="datastore.js"></script>
 	<script src="grid.js"></script>
 	<script>

grid-datamodel/datasort.html

@@ -14,6 +14,7 @@
 	<script src="../ui/jquery.ui.widget.js"></script>
 	<script src="dataitem.js"></script>
 	<script src="datasource.js"></script>
+	<script src="extractor-datasource.js"></script>
 	<script src="datastore.js"></script>
 	<script src="grid.js"></script>
 	<script>

grid-datamodel/datastore.js

@@ -31,7 +31,6 @@
 		},
 		// TODO rename or remove this (call datasource.get(store) directly instead)
 		populate: function( type ) {
-			console.log("never called?")
 			// TODO or rename datasource.get
 			$.ui.datasource.types[ type ].get( this );
 		},

grid-datamodel/extractor-datasource.js

@@ -0,0 +1,60 @@
+/*
+ * Table Extractor Datasource
+ * 
+ * Depends on:
+ * datasource
+ */
+(function( $ ) {
+	
+$.widget( "ui.extractingDatasource", $.ui.datasource, {
+	options: {
+		table: null
+	},
+	_create: function() {
+		var type = "generated" + $.now();
+		this.options.type = type;
+
+		var fieldDescriptions = {};
+		var fields = this.options.table.find( "th" ).map(function() {
+			var th = $( this ),
+				field = th.data( "field" );
+			if ( !field ) {
+				// generate field name if missing
+				field = th.text().toLowerCase().replace(/\s|[^a-z0-9]/g, "_");
+			}
+
+			fieldDescriptions[ field ] = {
+				type: th.data( "type" ),
+				culture: th.data( "culture" ),
+				format: th.data( "format" ),
+				sortOrder: th.data( "sort-order" ) || 1
+			};
+
+			return field;
+		}).get();
+		
+		$.ui.dataitem.extend( type, {
+			fields: fieldDescriptions
+		});
+
+		var indexedGuid = 1;
+		var items = this.options.source = this.options.table.find( "tbody" ).children().map(function() {
+			var item = { guid: $( this ).data( "guid" ) };
+			// generate guid if missing
+			if ( !item.guid ) {
+				item.guid = indexedGuid++;
+			}
+			$( this ).children().each(function( i ) {
+				item[ fields[ i ] ] = $( this ).text();
+			});
+			return item;
+		}).get();
+		
+		this._super("_create");
+	},
+	type: function() {
+		return this.options.type;
+	}
+});
+	
+})( jQuery );

grid-datamodel/grid.js

@@ -4,18 +4,21 @@
  * Depends on:
  * tmpl
  * datastore
+ * 
+ * Optional:
+ * extractingDatasource
  */
 (function( $ ) {
 
 $.widget( "ui.grid", {
 	options: {
+		columns: null,
 		type: null,
 		rowTemplate: null
 	},
 	_create: function() {
-		if ( !this.options.type ) {
-			this._parseData();
-		}
+		this._type();
+		this._columns();
 		this._rowTemplate();
 		var that = this;
 		this.element.addClass( "ui-widget" );
@@ -46,53 +49,30 @@ $.widget( "ui.grid", {
 		});
 		tbody.find( "td" ).addClass( "ui-widget-content" );
 	},
-	// TODO: data extraction should live on its own
-	// and grid should delegate the work to the data extractor
-	_parseData: function() {
-		var type = "generated" + $.now();
-		this.options.type = type;
-
-		var fieldDescriptions = {};
-		// TODO seperate column extraction from data extraction to make columns option actually optional
-		// TODO if columns is specified but not table header exist, generate it
-		var fields = this.options.columns = this.element.find( "th" ).map(function() {
-			var th = $( this ),
-				field = $( this ).data( "field" );
+	
+	_type: function() {
+		if ( !this.options.type ) {
+			// doesn't cover generationg the columns option or generating headers when option is specified
+			this.options.type = new $.ui.extractingDatasource( {
+				// TODO generate columns first, and pass along?
+				table: this.element
+			}).type();
+		}
+	},
+	
+	_columns: function() {
+		if ( this.options.columns ) {
+			// TODO check if table headers exist, generate if not
+			return;
+		}
+		this.options.columns = this.element.find( "th" ).map(function() {
+			var field = $( this ).data( "field" );
 			if ( !field ) {
 				// generate field name if missing
 				field = $( this ).text().toLowerCase().replace(/\s|[^a-z0-9]/g, "_");
 			}
-
-			fieldDescriptions[ field ] = {
-				type: th.data( "type" ),
-				culture: th.data( "culture" ),
-				format: th.data( "format" ),
-				sortOrder: th.data( "sort-order" ) || 1
-			};
-
 			return field;
-		}).get();
-
-		var indexedGuid = 1;
-		var items = this.element.find( "tbody" ).children().map(function() {
-			var item = { guid: $( this ).data( "guid" ) };
-			// generate guid if missing
-			if ( !item.guid ) {
-				item.guid = indexedGuid++;
-			}
-			$( this ).children().each(function( i ) {
-				item[ fields[ i ] ] = $( this ).text();
-			});
-			return item;
-		}).get();
-
-		$.ui.dataitem.extend( type, {
-			fields: fieldDescriptions
-		});
-		$.ui.datasource({
-			type: type,
-			source: items
-		});
+		}).get()
 	},
 
 	_rowTemplate: function() {