From fa3bb6676e8918fcf6a0cd855dfcc7ccbf5ccb16 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Fri, 17 Feb 2012 09:39:11 +0000 Subject: [PATCH 1/2] [doc][s]: correct index page using it example for new setup for backends and datasets. --- index.html | 66 +++++++++++++++++++++++++++--------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 47a006d4..4593c718 100644 --- a/index.html +++ b/index.html @@ -43,14 +43,17 @@ Recline Data Explorer + @@ -98,35 +101,6 @@

CSS: the demo utilizes bootstrap but you can integrate with your own HTML and CSS. Data Explorer specific CSS can be found here in the repo: https://github.com/okfn/recline/tree/master/css.

-

Using It

- 
-// Note: you should have included the relevant JS libraries (and CSS)
-// See above for dependencies
-
-// Dataset is a Backbone model
-var dataset = recline.Model.Dataset({
-  id: 'my-id'
-  backend: {
-    // backend ID so we can look backend up in the registry  (see below)
-    type: 'memory'
-    // other backend config (e.g. API url with which to communicate)
-    // this will usually be backend specific
-    ...
-  }
-});
-// DataExplorer is a Backbone View
-var explorer = recline.View.DataExplorer({
-  model: dataset,
-  // you can specify any element to bind to in the dom
-  el: $('.data-explorer-here')
-});
-// Start Backbone routing (if you want routing support)
-Backbone.history.start();
-
-

More details and examples: see docs below and the Demo (hit view source). The javascript you want for - actual integration is in: app.js.

-

Documentation

Recline has a simple structure layered on top of the basic Model/View distinction inherent in Backbone. There are the following three domain objects (all Backbone Models):

@@ -142,7 +116,33 @@ Backbone.history.start();
  • FlotGraph: a simple graphing view using Flot.
    • -

    Source

    +

    Using It

    + 
    +// Note: you should have included the relevant JS libraries (and CSS)
+// See above for dependencies
+
+// Dataset is a Backbone model so the first hash become model attributes
+var dataset = recline.Model.Dataset({
+    id: 'my-id'
+  },
+  // Either a backend instance or string id for a backend in the registry
+  backend
+);
+// DataExplorer is a Backbone View
+var explorer = recline.View.DataExplorer({
+  model: dataset,
+  // you can specify any element to bind to in the dom
+  el: $('.data-explorer-here')
+});
+// Start Backbone routing (if you want routing support)
+Backbone.history.start();
+
    +

    More details and examples: see docs below and the Demo -- just hit view source (NB: the javascript for the + demo is in: app.js).

    + + +

    Source Docs (via Docco)

      my.Dataset = Backbone.Model.extend({
     __type__: 'Dataset',
-    initialize: function(options) {
+    initialize: function(model, backend) {
+      this.backend = backend;
+      if (backend && backend.constructor == String) {
+        this.backend = my.backends[backend];
+      }
       this.currentDocuments = new my.DocumentList();
       this.docCount = null;
-      this.backend = null;
-    },

    getDocuments

    + this.defaultQuery = { + size: 100 + , offset: 0 + };

    this.queryState = {};

        },

    getDocuments

    AJAX method with promise API to get rows (documents) from the backend.

    @@ -25,19 +31,23 @@ also returned.

    :param start: passed onto backend getDocuments.

    this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here. -This also illustrates the limitations of separating the Dataset and the Backend

        getDocuments: function(numRows, start) {
+This also illustrates the limitations of separating the Dataset and the Backend
                                             
        query: function(queryObj) {
       var self = this;
-      var backend = my.backends[this.backendConfig.type];
+      this.queryState = queryObj || this.defaultQuery;
+      this.queryState = _.extend({size: 100, offset: 0}, this.queryState);
       var dfd = $.Deferred();
-      backend.getDocuments(this, numRows, start).then(function(rows) {
+      this.backend.query(this, this.queryState).done(function(rows) {
         var docs = _.map(rows, function(row) {
           var _doc = new my.Document(row);
-          _doc.backendConfig = self.backendConfig;
-          _doc.backend = backend;
+          _doc.backend = self.backend;
+          _doc.dataset = self;
           return _doc;
         });
         self.currentDocuments.reset(docs);
         dfd.resolve(self.currentDocuments);
+      })
+      .fail(function(arguments) {
+        dfd.reject(arguments);
       });
       return dfd.promise();
     },
@@ -47,14 +57,17 @@ This also illustrates the limitations of separating the Dataset and the Backend<
       data.docCount = this.docCount;
       return data;
     }
-  });
                                                                                       
                                    
                   
    A Document (aka Row)
    
+  });

    A Document (aka Row)

    A single entry or row in the dataset

      my.Document = Backbone.Model.extend({
     __type__: 'Document'
-  });

    A Backbone collection of Documents

      my.DocumentList = Backbone.Collection.extend({
+  });

    A Backbone collection of Documents

      my.DocumentList = Backbone.Collection.extend({
     __type__: 'DocumentList',
     model: my.Document
-  });
+  });

    Backend registry

    + +

    Backends will register themselves by id into this registry

      my.backends = {};
+
 }(jQuery, this.recline.Model));
    \ No newline at end of file