Skip to content

Commit 2f34b20

Browse files
jzaeffererjzaefferer
committed
Refactored data.html to extract grid, datastore, datasource and
dateitem. Added some basic grid tabl styles. Refactored datasource to store items in array and access by index instead of id.
1 parent 0b637d1 commit 2f34b20

File tree

6 files changed

+242
-155
lines changed

6 files changed

+242
-155
lines changed

‎tests/visual/grid/data.html

Lines changed: 20 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -3,167 +3,20 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Grid: Data</title>
6+
<link rel="stylesheet" href="../visual.css" />
67
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
8+
<link rel="stylesheet" href="grid.css" />
79
<script src="../../../jquery-1.4.4.js"></script>
810
<script src="../../../external/jquery.tmpl.js"></script>
911
<script src="../../../ui/jquery.ui.core.js"></script>
1012
<script src="../../../ui/jquery.ui.widget.js"></script>
13+
<script src="dataitem.js"></script>
14+
<script src="datasource.js"></script>
15+
<script src="datastore.js"></script>
16+
<script src="grid.js"></script>
1117
<script>
12-
$.widget( "ui.datastore", {
13-
_create: function() {
14-
this.items = {};
15-
},
16-
create: function( type, props ) {
17-
return $.ui.datasource.types[ type ].create( props );
18-
},
19-
_normalize: function( type, id ) {
20-
var item = this.items[ type ][ id ],
21-
ctor = $.ui.dataitem.types[ type ];
22-
if ( !( item instanceof $.ui.dataitem ) ) {
23-
item = this.items[ type ][ id ] = ctor({ data: item });
24-
}
25-
return item;
26-
},
27-
get: function( type, id ) {
28-
if ( id ) {
29-
return this._normalize( type, id );
30-
}
31-
32-
for ( id in this.items[ type ] ) {
33-
this._normalize( type, id );
34-
}
35-
return $.ui.dataitems({ items: this.items[ type ] });
36-
},
37-
populate: function( type ) {
38-
$.ui.datasource.types[ type ].get( this );
39-
},
40-
_populate: function( type, items ) {
41-
var local = this.items[ type ];
42-
$.each( items, function( i, item ) {
43-
local[ item.guid ] = item;
44-
});
45-
},
46-
save: function() {
47-
$.each( this.items, function( type, items ) {
48-
$.ui.datasource.types[ type ].save( items );
49-
});
50-
}
51-
});
52-
$.ui.datastore.main = $.ui.datastore();
53-
54-
$.widget( "ui.datasource", {
55-
options: {
56-
type: null,
57-
source: null
58-
},
59-
_create: function() {
60-
$.ui.datasource.types[ this.options.type ] = this;
61-
$.ui.datastore.main.items[ this.options.type ] = {};
62-
},
63-
create: function( props ) {
64-
this.options.source.push( props );
65-
},
66-
get: function( store ) {
67-
store._populate( this.options.type, this.options.source );
68-
},
69-
save: function( items ) {
70-
$.each( items, function( itemId, item ) {
71-
item.save();
72-
});
73-
},
74-
});
75-
$.ui.datasource.types = {};
76-
77-
$.widget( "ui.dataitem", {
78-
options: {
79-
data: null
80-
},
81-
_create: function() {
82-
},
83-
get: function( key ) {
84-
return this.options.data[ key ];
85-
},
86-
set: function( key, vaule ) {
87-
this.options.data[ key ] = value;
88-
return this;
89-
}
90-
});
91-
$.ui.dataitem.types = {};
92-
$.ui.dataitem.extend = function( type, prototype ) {
93-
$.widget( "ui.dataitem-" + type, $.ui.dataitem, prototype );
94-
$.ui.dataitem.types[ type ] = $.ui[ "dataitem-" + type ];
95-
};
96-
97-
$.widget( "ui.dataitems", {
98-
options: {
99-
items: null
100-
}
101-
});
102-
103-
$.widget( "ui.grid", {
104-
options: {
105-
type: null,
106-
rowTemplate: null
107-
},
108-
_create: function() {
109-
if ( !this.options.type ) {
110-
this._parseData();
111-
}
112-
var that = this;
113-
this.element.addClass( "ui-widget" );
114-
this.element.find( "th" ).addClass( "ui-widget-header" );
115-
this.element.delegate( "tbody > tr", "click", function( event ) {
116-
that._trigger( "select", event, {
117-
item: $.ui.datastore.main.get( that.options.type,
118-
$( this ).tmplItem().data.guid )
119-
});
120-
});
121-
this.refresh();
122-
},
123-
refresh: function() {
124-
var tbody = this.element.find( "tbody" ).empty(),
125-
items = $.ui.datastore.main.get( this.options.type ).options.items,
126-
template = this.options.rowTemplate;
127-
$.each( items, function( itemId, item ) {
128-
$.tmpl( template, item.options.data ).appendTo( tbody );
129-
});
130-
tbody.find( "td" ).addClass( "ui-widget-content" );
131-
},
132-
_parseData: function() {
133-
var type = "generated" + $.now();
134-
this.options.type = type;
135-
136-
var fields = this.element.find( "th" ).map(function() {
137-
return $( this ).data( "field" );
138-
}).get();
139-
140-
var items = this.element.find( "tbody" ).children().map(function() {
141-
var item = { guid: $( this ).data( "guid" ) };
142-
$( this ).children().each(function( i ) {
143-
item[ fields[ i ] ] = $( this ).text();
144-
});
145-
return item;
146-
}).get();
147-
148-
var template = $.map( fields, function( field ) {
149-
return "<td>${" + field + "}</td>";
150-
}).join( "" );
151-
template = "<tr>" + template + "</tr>";
152-
this.options.rowTemplate = template;
153-
154-
$.ui.datasource({
155-
type: type,
156-
source: items
157-
});
158-
$.ui.dataitem.extend( type, {} );
159-
$.ui.datastore.main.populate( type );
160-
}
161-
});
162-
163-
//----------------------------------------
164-
// Application level
165-
//----------------------------------------
166-
18+
// TODO this isn't used anywhere - how to access this method from #row-tmpl?
19+
// grid passed dataitem.options.data, that doesn't include access to this method
16720
$.ui.dataitem.extend( "developer", {
16821
fullName: function() {
16922
return this.get( "firstName" ) + " " + this.get( "lastName" );
@@ -197,10 +50,13 @@
19750
}
19851
];
19952

53+
// TODO what's the relation between datasource and datastore?
54+
// couldn't/shouldn't this be just one widget?
20055
$.ui.datasource({
20156
type: "developer",
20257
source: data
20358
});
59+
// TODO when will be a need for a non-main datastore?
20460
$.ui.datastore.main.populate( "developer" );
20561

20662
$(function() {
@@ -210,12 +66,21 @@
21066
select: showDetails
21167
});
21268

69+
// TODO shouldn't the extraction be seperate from the grid?
70+
// e.g. as a datasource extracting the table data and providing the result to grid
21371
$( "#developers-pe" ).grid({
21472
select: showDetails
21573
});
21674

75+
// TODO this could be a form view, having to handle events
76+
// and modifying item accordingly
77+
// and telling datastore/source about the changes
78+
//
79+
// implement as extension of a view widget?
21780
function showDetails( event, ui ) {
21881
$( "#developer-tmpl" )
82+
// TODO accessing data though item.options makes no sense
83+
// this should be just ui.item passed to .tmpl
21984
.tmpl( ui.item.options.data )
22085
.appendTo( $( "#developer" ).empty() );
22186
}

‎tests/visual/grid/dataitem.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* Dataitem and Dataitems
3+
*
4+
* Depends on:
5+
* ---
6+
*/
7+
(function( $ ) {
8+
9+
$.widget( "ui.dataitem", {
10+
options: {
11+
data: null
12+
},
13+
_create: function() {
14+
},
15+
get: function( key ) {
16+
return this.options.data[ key ];
17+
},
18+
set: function( key, vaule ) {
19+
this.options.data[ key ] = value;
20+
return this;
21+
}
22+
});
23+
$.ui.dataitem.types = {};
24+
$.ui.dataitem.extend = function( type, prototype ) {
25+
$.widget( "ui.dataitem-" + type, $.ui.dataitem, prototype );
26+
$.ui.dataitem.types[ type ] = $.ui[ "dataitem-" + type ];
27+
};
28+
29+
$.widget( "ui.dataitems", {
30+
options: {
31+
items: null
32+
}
33+
});
34+
35+
})( jQuery );

‎tests/visual/grid/datasource.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Datasource
3+
*
4+
* Depends on:
5+
* datastore
6+
*/
7+
(function( $ ) {
8+
9+
$.widget( "ui.datasource", {
10+
options: {
11+
type: null,
12+
source: null
13+
},
14+
_create: function() {
15+
$.ui.datasource.types[ this.options.type ] = this;
16+
$.ui.datastore.main.items[ this.options.type ] = [];
17+
},
18+
create: function( props ) {
19+
this.options.source.push( props );
20+
},
21+
get: function( store ) {
22+
store._populate( this.options.type, this.options.source );
23+
},
24+
save: function( items ) {
25+
$.each( items, function( itemId, item ) {
26+
item.save();
27+
});
28+
},
29+
});
30+
$.ui.datasource.types = {};
31+
32+
})( jQuery );

‎tests/visual/grid/datastore.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Datastore
3+
*
4+
* Depends on:
5+
* datasource
6+
* dataitem
7+
* dataitems
8+
*/
9+
(function( $ ) {
10+
11+
$.widget( "ui.datastore", {
12+
// TODO hackity hack to get the same dataitems instance back for calls to datastore.get(type)
13+
dataitems: {},
14+
_create: function() {
15+
this.items = {};
16+
},
17+
create: function( type, props ) {
18+
return $.ui.datasource.types[ type ].create( props );
19+
},
20+
// TODO this should be done just once
21+
_normalize: function( type, index, item ) {
22+
var ctor = $.ui.dataitem.types[ type ];
23+
if ( !( item instanceof $.ui.dataitem ) ) {
24+
item = this.items[ type ][ index ] = ctor({ data: item });
25+
}
26+
return item;
27+
},
28+
// TODO there should be seperate methods for getting an item and a dataitems collection
29+
get: function( type, id ) {
30+
if ( id ) {
31+
for ( var i = 0, length = this.items[ type ].length; i < length; i++ ) {
32+
var item = this.items[ type ][ i ];
33+
// TODO consider saving items by id into an object for fast key lookup
34+
if (item.options.data.guid == id) {
35+
return this._normalize( type, i, item );
36+
}
37+
}
38+
}
39+
if ( this.dataitems[type] ) {
40+
return this.dataitems[type];
41+
}
42+
for ( var i = 0, length = this.items[ type ].length; i < length; i++ ) {
43+
this._normalize( type, i, this.items[ type ][ i ] );
44+
}
45+
return this.dataitems[type] = $.ui.dataitems({ items: this.items[ type ] });
46+
},
47+
populate: function( type ) {
48+
// TODO datasource.get is calling datastore._populate - inline that?
49+
$.ui.datasource.types[ type ].get( this );
50+
},
51+
_populate: function( type, items ) {
52+
// TODO just assign items to this.items[type]?
53+
var local = this.items[ type ];
54+
$.each( items, function( i, item ) {
55+
// TODO changed this to use index for proper array indexing
56+
// was item.guid which is not useful as array index
57+
local[ i ] = item;
58+
});
59+
},
60+
save: function() {
61+
$.each( this.items, function( type, items ) {
62+
$.ui.datasource.types[ type ].save( items );
63+
});
64+
}
65+
});
66+
$.ui.datastore.main = $.ui.datastore();
67+
68+
})( jQuery );

‎tests/visual/grid/grid.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
table {
2+
border-collapse: collapse;
3+
}
4+
th, td {
5+
padding: 0.5em;
6+
border: 1px solid black;
7+
}

0 commit comments

Comments
 (0)