knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:okfn/recline

Browse Source
This commit is contained in:
Rufus Pollock 2014-08-16 17:03:19 +01:00
commit 025540c98b
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/tutorial-views.markdown
View File

@ -28,10 +28,13 @@ Before writing any code with Recline, you need to do the following preparation s
3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
{% highlight html %}<!-- 3rd party dependencies -->
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
<script type="text/javascript" src="vendor/jquery.mustache.js"></script>
<script type="text/javascript" src="vendor/underscore/1.4.4/underscore.js"></script>
<script type="text/javascript" src="vendor/backbone/1.0.0/backbone.js"></script>
<script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="vendor/bootstrap/2.3.2/bootstrap.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/slick.core.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/slick.grid.js"></script>
<!-- note that we could include individual components rather than whole of recline e.g.
<script type="text/javascript" src="src/model.js"></script>
<script type="text/javascript" src="src/backend/memory.js"></script>
@ -65,15 +68,18 @@ var dataset = new recline.Model.Dataset({
### Setting up the Grid
Let's create a data grid view to display the dataset we have just created. We're going to use the SlickGrid-based grid so we need the following:
Let's create a data grid view to display the dataset we have just created. We're going to use the SlickGrid-based grid so we need the following CSS and JS dependencies in addition to those above:
{% highlight html %}
<link rel="stylesheet" href="css/slickgrid.css">
<link rel="stylesheet" href="vendor/slickgrid/2.0.1/slick.grid.css">
<!-- vendor -->
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.min.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/slickgrid/2.0.1/plugins/slick.rowselectionmodel.js"></script>
<script type="text/javascript" src="vendor/slickgrid/2.0.1/plugins/slick.rowmovemanager.js"></script>
<!-- Recline -->
<script type="text/javascript" src="src/view.slickgrid.js"></script>

10
src/view.multiview.js
View File

@ -11,7 +11,7 @@ this.recline.View = this.recline.View || {};
// Manage multiple views together along with query editor etc. Usage:
//
// <pre>
// var myExplorer = new model.recline.MultiView({
// var myExplorer = new recline.View.MultiView({
// model: {{recline.Model.Dataset instance}}
// el: {{an existing dom element}}
// views: {{dataset views}}
@ -61,7 +61,7 @@ this.recline.View = this.recline.View || {};
// {
// id: 'filterEditor', // used for routing
// label: 'Filters', // used for view switcher
// view: new recline.View.FielterEditor({
// view: new recline.View.FilterEditor({
// model: dataset
// })
// },
@ -79,10 +79,10 @@ this.recline.View = this.recline.View || {};
// special as it includes config of many of the subviews.
//
// <pre>
// state = {
// var state = {
// query: {dataset query state - see dataset.queryState object}
// view-{id1}: {view-state for this view}
// view-{id2}: {view-state for }
// 'view-{id1}': {view-state for this view}
// 'view-{id2}': {view-state for }
// ...
// // Explorer
// currentView: id of current view (defaults to first view if not specified)