[refactor][s]: put model and view objects inside modules of similar name (Model, View).

This commit is contained in:
rgrp 2011-12-07 13:49:50 +00:00
parent d35d3a8986
commit 653f59610f
5 changed files with 49 additions and 29 deletions

View File

@ -3,14 +3,14 @@ $(function() {
// window.$container = $('.container .right-panel'); // window.$container = $('.container .right-panel');
window.$container = $('.container'); window.$container = $('.container');
var dataset = demoDataset(); var dataset = demoDataset();
window.dataExplorer = new recline.DataExplorer({ window.dataExplorer = new recline.View.DataExplorer({
model: dataset model: dataset
}); });
window.$container.append(window.dataExplorer.el); window.$container.append(window.dataExplorer.el);
setupLoadFromWebstore(function(dataset) { setupLoadFromWebstore(function(dataset) {
window.dataExplorer.remove(); window.dataExplorer.remove();
window.dataExplorer = null; window.dataExplorer = null;
window.dataExplorer = new recline.DataExplorer({ window.dataExplorer = new recline.View.DataExplorer({
model: dataset, model: dataset,
}); });
window.$container.append(window.dataExplorer.el); window.$container.append(window.dataExplorer.el);
@ -36,12 +36,12 @@ function demoDataset() {
] ]
}; };
// this is all rather artificial here but would make more sense with more complex backend // this is all rather artificial here but would make more sense with more complex backend
var backend = new recline.BackendMemory(); var backend = new recline.Model.BackendMemory();
backend.addDataset({ backend.addDataset({
metadata: metadata, metadata: metadata,
data: indata data: indata
}); });
recline.setBackend(backend); recline.Model.setBackend(backend);
var dataset = backend.getDataset(datasetId); var dataset = backend.getDataset(datasetId);
return dataset; return dataset;
} }
@ -54,10 +54,10 @@ function setupLoadFromWebstore(callback) {
e.preventDefault(); e.preventDefault();
var $form = $(e.target); var $form = $(e.target);
var source = $form.find('input[name="source"]').val(); var source = $form.find('input[name="source"]').val();
var backend = new recline.BackendWebstore({ var backend = new recline.Model.BackendWebstore({
url: source url: source
}); });
recline.setBackend(backend); recline.Model.setBackend(backend);
var dataset = backend.getDataset(); var dataset = backend.getDataset();
callback(dataset); callback(dataset);
}); });

View File

@ -1,7 +1,12 @@
this.recline = this.recline || {}; this.recline = this.recline || {};
// Models module following classic module pattern
recline.Model = function($) {
var my = {};
// A Dataset model. // A Dataset model.
recline.Dataset = Backbone.Model.extend({ my.Dataset = Backbone.Model.extend({
__type__: 'Dataset', __type__: 'Dataset',
getLength: function() { getLength: function() {
return this.rowCount; return this.rowCount;
@ -17,33 +22,33 @@ recline.Dataset = Backbone.Model.extend({
var dfd = $.Deferred(); var dfd = $.Deferred();
this.backend.getRows(this.id, numRows, start).then(function(rows) { this.backend.getRows(this.id, numRows, start).then(function(rows) {
var docs = _.map(rows, function(row) { var docs = _.map(rows, function(row) {
return new recline.Document(row); return new my.Document(row);
}); });
var docList = new recline.DocumentList(docs); var docList = new my.DocumentList(docs);
dfd.resolve(docList); dfd.resolve(docList);
}); });
return dfd.promise(); return dfd.promise();
} }
}); });
recline.Document = Backbone.Model.extend({}); my.Document = Backbone.Model.extend({});
recline.DocumentList = Backbone.Collection.extend({ my.DocumentList = Backbone.Collection.extend({
// webStore: new WebStore(this.url), // webStore: new WebStore(this.url),
model: recline.Document model: my.Document
}) })
// Backends section // Backends section
// ================ // ================
recline.setBackend = function(backend) { my.setBackend = function(backend) {
Backbone.sync = backend.sync; Backbone.sync = backend.sync;
}; };
// Backend which just caches in memory // Backend which just caches in memory
// //
// Does not need to be a backbone model but provides some conveience // Does not need to be a backbone model but provides some conveience
recline.BackendMemory = Backbone.Model.extend({ my.BackendMemory = Backbone.Model.extend({
initialize: function() { initialize: function() {
this._datasetCache = {} this._datasetCache = {}
}, },
@ -52,7 +57,7 @@ recline.BackendMemory = Backbone.Model.extend({
this._datasetCache[dataset.metadata.id] = dataset; this._datasetCache[dataset.metadata.id] = dataset;
}, },
getDataset: function(id) { getDataset: function(id) {
var dataset = new recline.Dataset({ var dataset = new my.Dataset({
id: id id: id
}); });
// this is a bit weird but problem is in sync this is set to parent model object so need to give dataset a reference to backend explicitly // this is a bit weird but problem is in sync this is set to parent model object so need to give dataset a reference to backend explicitly
@ -97,13 +102,13 @@ recline.BackendMemory = Backbone.Model.extend({
// //
// Designed to only attached to only dataset and one dataset only ... // Designed to only attached to only dataset and one dataset only ...
// Could generalize to support attaching to different datasets // Could generalize to support attaching to different datasets
recline.BackendWebstore = Backbone.Model.extend({ my.BackendWebstore = Backbone.Model.extend({
// require url attribute in initialization data // require url attribute in initialization data
initialize: function() { initialize: function() {
this.webstoreTableUrl = this.get('url'); this.webstoreTableUrl = this.get('url');
}, },
getDataset: function(id) { getDataset: function(id) {
var dataset = new recline.Dataset({ var dataset = new my.Dataset({
id: id id: id
}); });
dataset.backend = this; dataset.backend = this;
@ -159,3 +164,8 @@ recline.BackendWebstore = Backbone.Model.extend({
return dfd.promise(); return dfd.promise();
} }
}); });
return my;
}(jQuery);

View File

@ -1,6 +1,11 @@
this.recline = this.recline || {}; this.recline = this.recline || {};
recline.DataExplorer = Backbone.View.extend({ // Views module following classic module pattern
recline.View = function($) {
var my = {};
my.DataExplorer = Backbone.View.extend({
tagName: 'div', tagName: 'div',
className: 'data-explorer', className: 'data-explorer',
template: ' \ template: ' \
@ -28,10 +33,10 @@ recline.DataExplorer = Backbone.View.extend({
// note this.model and dataset returned are the same // note this.model and dataset returned are the same
this.model.fetch().then(function(dataset) { this.model.fetch().then(function(dataset) {
// initialize of dataTable calls render // initialize of dataTable calls render
self.dataTable = new recline.DataTable({ self.dataTable = new my.DataTable({
model: dataset model: dataset
}); });
self.flotGraph = new recline.FlotGraph({ self.flotGraph = new my.FlotGraph({
model: dataset model: dataset
}); });
self.flotGraph.el.hide(); self.flotGraph.el.hide();
@ -65,7 +70,7 @@ recline.DataExplorer = Backbone.View.extend({
// DataTable provides a tabular view on a Dataset. // DataTable provides a tabular view on a Dataset.
// //
// Initialize it with a recline.Dataset object. // Initialize it with a recline.Dataset object.
recline.DataTable = Backbone.View.extend({ my.DataTable = Backbone.View.extend({
tagName: "div", tagName: "div",
className: "data-table-container", className: "data-table-container",
@ -224,7 +229,7 @@ recline.DataTable = Backbone.View.extend({
// //
// Since we want this to update in place it is up to creator to provider the element to attach to. // Since we want this to update in place it is up to creator to provider the element to attach to.
// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable. // In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
recline.DataTableRow = Backbone.View.extend({ my.DataTableRow = Backbone.View.extend({
initialize: function(options) { initialize: function(options) {
this._headers = options.headers; this._headers = options.headers;
this.el = $(this.el); this.el = $(this.el);
@ -257,7 +262,7 @@ recline.DataTableRow = Backbone.View.extend({
} }
}); });
recline.FlotGraph = Backbone.View.extend({ my.FlotGraph = Backbone.View.extend({
tagName: "div", tagName: "div",
className: "data-graph-container", className: "data-graph-container",
@ -411,3 +416,8 @@ recline.FlotGraph = Backbone.View.extend({
return this; return this;
} }
}); });
return my;
}(jQuery);

View File

@ -21,12 +21,12 @@ test('new Dataset', function () {
] ]
}; };
// this is all rather artificial here but would make more sense with more complex backend // this is all rather artificial here but would make more sense with more complex backend
backend = new recline.BackendMemory(); backend = new recline.Model.BackendMemory();
backend.addDataset({ backend.addDataset({
metadata: metadata, metadata: metadata,
data: indata data: indata
}); });
recline.setBackend(backend); recline.Model.setBackend(backend);
var dataset = backend.getDataset(datasetId); var dataset = backend.getDataset(datasetId);
expect(6); expect(6);
dataset.fetch().then(function(dataset) { dataset.fetch().then(function(dataset) {
@ -121,10 +121,10 @@ webstoreData = {
test('Webstore Backend', function() { test('Webstore Backend', function() {
stop(); stop();
var backend = new recline.BackendWebstore({ var backend = new recline.Model.BackendWebstore({
url: 'http://webstore.test.ckan.org/rufuspollock/demo/data' url: 'http://webstore.test.ckan.org/rufuspollock/demo/data'
}); });
recline.setBackend(backend); recline.Model.setBackend(backend);
dataset = backend.getDataset(); dataset = backend.getDataset();
var stub = sinon.stub($, 'ajax', function(options) { var stub = sinon.stub($, 'ajax', function(options) {

View File

@ -5,12 +5,12 @@ module("View");
test('new DataTableRow View', function () { test('new DataTableRow View', function () {
var $el = $('<tr />'); var $el = $('<tr />');
$('.fixtures .test-datatable').append($el); $('.fixtures .test-datatable').append($el);
var doc = new recline.Document({ var doc = new recline.Model.Document({
'id': 1, 'id': 1,
'b': '2', 'b': '2',
'a': '1' 'a': '1'
}); });
var view = new recline.DataTableRow({ var view = new recline.View.DataTableRow({
model: doc model: doc
, el: $el , el: $el
, headers: ['a', 'b'] , headers: ['a', 'b']