fixed couchdb backend, updated backbone and underscore, added couchdb multiview example in demos
This commit is contained in:
Bietz
Rufus Pollock
parent
00d36f2dac
commit
b8537aae57
90
demos/couchdb_multiview/app.js
Executable file
90
demos/couchdb_multiview/app.js
Executable file
@ -0,0 +1,90 @@
|
||||
jQuery(function($) {
|
||||
window.dataExplorer = null;
|
||||
window.explorerDiv = $('.data-explorer-here');
|
||||
|
||||
// This is some fancy stuff to allow configuring the multiview from
|
||||
// parameters in the query string
|
||||
//
|
||||
// For more on state see the view documentation.
|
||||
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
if (state) {
|
||||
_.each(state, function(value, key) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch(e) {}
|
||||
state[key] = value;
|
||||
});
|
||||
} else {
|
||||
state.url = 'demo';
|
||||
}
|
||||
|
||||
//Add your couchdb here!!!
|
||||
//"couchdb" is what a choose for my reverse proxy. look up apache reverse or nginx reverse proxy. you need to set this up before you can connect your db
|
||||
var dataset = new recline.Model.Dataset({
|
||||
db_url: '/couchdb/yourcouchdb',
|
||||
view_url: '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
|
||||
backend: 'couchdb',
|
||||
query_options: {
|
||||
'key': '_id'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
console.log('records: ' + dataset.records);
|
||||
});
|
||||
|
||||
createExplorer(dataset, state);
|
||||
});
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
var createExplorer = function(dataset, state) {
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (window.dataExplorer) {
|
||||
window.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
window.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo(window.explorerDiv);
|
||||
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.SlickGrid({
|
||||
model: dataset
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.Graph({
|
||||
model: dataset
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'map',
|
||||
label: 'Map',
|
||||
view: new recline.View.Map({
|
||||
model: dataset
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'transform',
|
||||
label: 'Transform',
|
||||
view: new recline.View.Transform({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
window.dataExplorer = new recline.View.MultiView({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: state,
|
||||
views: views
|
||||
});
|
||||
}
|
||||
78
demos/couchdb_multiview/index.html
Executable file
78
demos/couchdb_multiview/index.html
Executable file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../vendor/bootstrap/2.0.2/css/bootstrap.css" />
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="../../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../../vendor/slickgrid/2.0.1/slick.grid.css">
|
||||
|
||||
<!-- Recline CSS components -->
|
||||
<link rel="stylesheet" href="../../css/grid.css">
|
||||
<link rel="stylesheet" href="../../css/slickgrid.css">
|
||||
<link rel="stylesheet" href="../../css/graph.css">
|
||||
<link rel="stylesheet" href="../../css/transform.css">
|
||||
<link rel="stylesheet" href="../../css/map.css">
|
||||
<link rel="stylesheet" href="../../css/multiview.css">
|
||||
<!-- 3rd party dependencies -->
|
||||
<script type="text/javascript" src="../../vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/underscore/underscore.1.3.3.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/backbone/backbone.0.9.2.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/mustache/0.5.0-dev/mustache.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/moment/1.6.2/moment.js"></script>
|
||||
<script type="text/javascript" src="../../vendor/timeline/20120520/js/timeline.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../src/backend.couchdb.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.grid.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.slickgrid.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.transform.js"></script>
|
||||
<script type="text/javascript" src="../../src/costco.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.graph.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.map.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.timeline.js"></script>
|
||||
<script type="text/javascript" src="../../src/widget.pager.js"></script>
|
||||
<script type="text/javascript" src="../../src/widget.queryeditor.js"></script>
|
||||
<script type="text/javascript" src="../../src/widget.filtereditor.js"></script>
|
||||
<script type="text/javascript" src="../../src/widget.fields.js"></script>
|
||||
<script type="text/javascript" src="../../src/view.multiview.js"></script>
|
||||
<script type="text/javascript" src="../../dist/recline.js"></script>
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ex-1"></div>
|
||||
<!--
|
||||
<div id="mymap"></div>
|
||||
<div id="mygraph"></div>
|
||||
<div id="mygrid"></div>
|
||||
<div style="clear: both;"></div>
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
.recline-slickgrid {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.recline-timeline .vmm-timeline {
|
||||
height: 550px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="data-explorer-here"></div>
|
||||
|
||||
<div style="clear: both;"></div>
|
||||
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -13,6 +13,10 @@ root: ../
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h3><a href="couchdb_multiview/">CouchDB Multiview Demo</a></h3>
|
||||
<p>You will need to modify the "app.js" file in "demos/couchdb_multiview"
|
||||
to connect to your couch database. Also, don't forget to configure your
|
||||
<b>reverse proxy or proxy so you can connect to your database</b>.</p>
|
||||
<h3><a href="multiview/">Multiview Demo</a></h3>
|
||||
<p>See the integrated <a href="multiview/">multiview in action on a
|
||||
sample dataset</a> - the multiview incorporates most the main views
|
||||
|
||||
26
src/backend.couchdb.js
Normal file → Executable file
26
src/backend.couchdb.js
Normal file → Executable file
@ -2,8 +2,8 @@ this.recline = this.recline || {};
|
||||
this.recline.Backend = this.recline.Backend || {};
|
||||
this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
|
||||
|
||||
(function($, my) {
|
||||
my.__type__ = 'couchdb';
|
||||
(function($, my) {
|
||||
my.__type__ = 'couchdb';
|
||||
|
||||
// ## CouchDB Wrapper
|
||||
//
|
||||
@ -11,9 +11,10 @@ this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
|
||||
// @param {String} endpoint: url for CouchDB database, e.g. for Couchdb running
|
||||
// on localhost:5984 with database // ckan-std it would be:
|
||||
//
|
||||
// <pre>http://localhost:5984/ckan-std</pre>
|
||||
//
|
||||
// TODO Add user/password arguments for couchdb authentication support.
|
||||
//
|
||||
// See the example how to use this in: "demos/couchdb_multiview"
|
||||
my.CouchDBWrapper = function(db_url, view_url, options) {
|
||||
var self = this;
|
||||
self.endpoint = db_url;
|
||||
@ -150,17 +151,16 @@ this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
|
||||
//
|
||||
// Backbone connector for a CouchDB backend.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// var backend = new recline.Backend.CouchDB();
|
||||
// Usage: (also see demos/couchdb_multiview)
|
||||
// var dataset = new recline.Model.Dataset({
|
||||
// db_url: '/couchdb/mydb',
|
||||
// view_url: '/couchdb/mydb/_design/design1/_views/view1',
|
||||
// query_options: {
|
||||
// 'key': 'some_document_key'
|
||||
// }
|
||||
// db_url: '/couchdb/iid',
|
||||
// view_url: '/couchdb/iid/_design/latlon/_view/latlon',
|
||||
// backend: 'couchdb',
|
||||
// query_options: {
|
||||
// 'key': '_id'
|
||||
// }
|
||||
// });
|
||||
// backend.fetch(dataset.toJSON());
|
||||
//
|
||||
// backend.query(query, dataset.toJSON()).done(function () { ... });
|
||||
//
|
||||
// Alternatively:
|
||||
@ -494,6 +494,6 @@ _deleteDocument = function (del_doc, dataset) {
|
||||
dfd.reject(args);
|
||||
});
|
||||
return dfd.promise();
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery, this.recline.Backend.CouchDB));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user