From 653f59610fb90583ca5df7aa856beaa8d820efed Mon Sep 17 00:00:00 2001 From: rgrp Date: Wed, 7 Dec 2011 13:49:50 +0000 Subject: [PATCH] [refactor][s]: put model and view objects inside modules of similar name (Model, View). --- demo/js/app.js | 12 ++++++------ src/model.js | 32 +++++++++++++++++++++----------- src/view.js | 22 ++++++++++++++++------ test/model.test.js | 8 ++++---- test/view.test.js | 4 ++-- 5 files changed, 49 insertions(+), 29 deletions(-) diff --git a/demo/js/app.js b/demo/js/app.js index 21f360bc..54eef6fe 100755 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -3,14 +3,14 @@ $(function() { // window.$container = $('.container .right-panel'); window.$container = $('.container'); var dataset = demoDataset(); - window.dataExplorer = new recline.DataExplorer({ + window.dataExplorer = new recline.View.DataExplorer({ model: dataset }); window.$container.append(window.dataExplorer.el); setupLoadFromWebstore(function(dataset) { window.dataExplorer.remove(); window.dataExplorer = null; - window.dataExplorer = new recline.DataExplorer({ + window.dataExplorer = new recline.View.DataExplorer({ model: dataset, }); 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 - var backend = new recline.BackendMemory(); + var backend = new recline.Model.BackendMemory(); backend.addDataset({ metadata: metadata, data: indata }); - recline.setBackend(backend); + recline.Model.setBackend(backend); var dataset = backend.getDataset(datasetId); return dataset; } @@ -54,10 +54,10 @@ function setupLoadFromWebstore(callback) { e.preventDefault(); var $form = $(e.target); var source = $form.find('input[name="source"]').val(); - var backend = new recline.BackendWebstore({ + var backend = new recline.Model.BackendWebstore({ url: source }); - recline.setBackend(backend); + recline.Model.setBackend(backend); var dataset = backend.getDataset(); callback(dataset); }); diff --git a/src/model.js b/src/model.js index d4eac521..7a783da7 100644 --- a/src/model.js +++ b/src/model.js @@ -1,7 +1,12 @@ this.recline = this.recline || {}; +// Models module following classic module pattern +recline.Model = function($) { + +var my = {}; + // A Dataset model. -recline.Dataset = Backbone.Model.extend({ +my.Dataset = Backbone.Model.extend({ __type__: 'Dataset', getLength: function() { return this.rowCount; @@ -17,33 +22,33 @@ recline.Dataset = Backbone.Model.extend({ var dfd = $.Deferred(); this.backend.getRows(this.id, numRows, start).then(function(rows) { 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); }); 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), - model: recline.Document + model: my.Document }) // Backends section // ================ -recline.setBackend = function(backend) { +my.setBackend = function(backend) { Backbone.sync = backend.sync; }; // Backend which just caches in memory // // Does not need to be a backbone model but provides some conveience -recline.BackendMemory = Backbone.Model.extend({ +my.BackendMemory = Backbone.Model.extend({ initialize: function() { this._datasetCache = {} }, @@ -52,7 +57,7 @@ recline.BackendMemory = Backbone.Model.extend({ this._datasetCache[dataset.metadata.id] = dataset; }, getDataset: function(id) { - var dataset = new recline.Dataset({ + var dataset = new my.Dataset({ 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 @@ -97,13 +102,13 @@ recline.BackendMemory = Backbone.Model.extend({ // // Designed to only attached to only dataset and one dataset only ... // Could generalize to support attaching to different datasets -recline.BackendWebstore = Backbone.Model.extend({ +my.BackendWebstore = Backbone.Model.extend({ // require url attribute in initialization data initialize: function() { this.webstoreTableUrl = this.get('url'); }, getDataset: function(id) { - var dataset = new recline.Dataset({ + var dataset = new my.Dataset({ id: id }); dataset.backend = this; @@ -159,3 +164,8 @@ recline.BackendWebstore = Backbone.Model.extend({ return dfd.promise(); } }); + +return my; + +}(jQuery); + diff --git a/src/view.js b/src/view.js index bf1611c9..2658ad82 100644 --- a/src/view.js +++ b/src/view.js @@ -1,6 +1,11 @@ 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', className: 'data-explorer', template: ' \ @@ -28,10 +33,10 @@ recline.DataExplorer = Backbone.View.extend({ // note this.model and dataset returned are the same this.model.fetch().then(function(dataset) { // initialize of dataTable calls render - self.dataTable = new recline.DataTable({ + self.dataTable = new my.DataTable({ model: dataset }); - self.flotGraph = new recline.FlotGraph({ + self.flotGraph = new my.FlotGraph({ model: dataset }); self.flotGraph.el.hide(); @@ -65,7 +70,7 @@ recline.DataExplorer = Backbone.View.extend({ // DataTable provides a tabular view on a Dataset. // // Initialize it with a recline.Dataset object. -recline.DataTable = Backbone.View.extend({ +my.DataTable = Backbone.View.extend({ tagName: "div", 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. // 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) { this._headers = options.headers; 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", className: "data-graph-container", @@ -411,3 +416,8 @@ recline.FlotGraph = Backbone.View.extend({ return this; } }); + +return my; + +}(jQuery); + diff --git a/test/model.test.js b/test/model.test.js index 73c01657..12e740bd 100644 --- a/test/model.test.js +++ b/test/model.test.js @@ -21,12 +21,12 @@ test('new Dataset', function () { ] }; // 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({ metadata: metadata, data: indata }); - recline.setBackend(backend); + recline.Model.setBackend(backend); var dataset = backend.getDataset(datasetId); expect(6); dataset.fetch().then(function(dataset) { @@ -121,10 +121,10 @@ webstoreData = { test('Webstore Backend', function() { stop(); - var backend = new recline.BackendWebstore({ + var backend = new recline.Model.BackendWebstore({ url: 'http://webstore.test.ckan.org/rufuspollock/demo/data' }); - recline.setBackend(backend); + recline.Model.setBackend(backend); dataset = backend.getDataset(); var stub = sinon.stub($, 'ajax', function(options) { diff --git a/test/view.test.js b/test/view.test.js index 241d748d..e8eb9755 100644 --- a/test/view.test.js +++ b/test/view.test.js @@ -5,12 +5,12 @@ module("View"); test('new DataTableRow View', function () { var $el = $(''); $('.fixtures .test-datatable').append($el); - var doc = new recline.Document({ + var doc = new recline.Model.Document({ 'id': 1, 'b': '2', 'a': '1' }); - var view = new recline.DataTableRow({ + var view = new recline.View.DataTableRow({ model: doc , el: $el , headers: ['a', 'b']