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

[#113,doc/example-quickstart][s]: various minor improvements and switch to using a richer set of sample data (and including it from _includes).

Browse Source
This commit is contained in:
Rufus Pollock 2012-05-17 13:46:48 +01:00
parent 7963dc2a09
commit d49956e4de
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_includes/data.js Normal file
View File

@ -0,0 +1,9 @@
var data = [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', label: 'second', lat:54.97, lon:-1.60},
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', label: 'third', lat:40.00, lon:-75.5},
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', label: 'fourth', lat:57.27, lon:-6.20},
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', label: 'fifth', lat:51.58, lon:0},
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', label: 'sixth', lat:51.04, lon:7.9}
];

41
example-quickstart.markdown
View File

@ -20,41 +20,42 @@ Before writing any code with Recline, you need to do the following preparation s
2. Include the relevant CSS in the head section of your document:
{% highlight html %}
<!-- you do not have to use bootstrap but we use it by default -->
<link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css">
<link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css" />
<!-- CSS for relevant view components - here we just have grid -->
<link rel="stylesheet" href="css/grid.css" />{% endhighlight %}
<link rel="stylesheet" href="css/grid.css" />{% endhighlight %}
3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
{% highlight html %}
<!-- you do not have to use bootstrap but we use it by default -->
<link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css">
<!-- 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>
<!-- note that we could include individual components rather than whole of recline -->
<!-- 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/base.js"></script>
<script type="text/javascript" src="src/backend/memory.js"></script>
<script type="text/javascript" src="src/view-grid.js"></script>
-->
<script type="text/javascript" src="recline.js"></script>{% endhighlight %}
4. Create a div to hold the Recline view(s):
{% highlight html %}
<div id="recline-grid"></div>{% endhighlight %}
<div id="mygrid"></div>{% endhighlight %}
You're now ready to start working with Recline.
### Creating a Dataset
We are going to be working with the following set of data:
Here's some example data We are going to work with:
{% highlight javascript %}
var data = [
{id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'},
{id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'},
{id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
];
{% include data.js %}
{% endhighlight %}
Here we have 3 documents / rows each of which is a javascript object containing keys and values (note that all values here are 'simple' but there is no reason you cannot have full objects as values.
In this data we have 6 documents / rows. Each document is a javascript object
containing keys and values (note that all values here are 'simple' but there is
no reason you cannot have objects as values allowing you to nest data.
We can now create a recline Dataset object (and memory backend) from this raw data:
@ -67,28 +68,24 @@ Note that behind the scenes Recline will create a Memory backend for this datase
### Setting up the Grid
Let's create a data grid view to display the dataset we have just created, binding the view to the `<div id="recline-grid"></div>` we created earlier:
Let's create a data grid view to display the dataset we have just created, binding the view to the `<div id="mygrid"></div>` we created earlier:
{% highlight javascript %}
var grid = new recline.View.Grid({
model: dataset,
el: $('#recline-grid')
el: $('#mygrid')
});
grid.render();
{% endhighlight %}
And hey presto:
<div id="recline-grid" class="recline-read-only">&nbsp;</div>
<div id="mygrid" class="recline-read-only" style="margin-bottom: 30px; margin-top: -20px;">&nbsp;</div>
<script type="text/javascript">
var data = [
{id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
, {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
, {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
];
{% include data.js %}
var dataset = recline.Backend.createDataset(data);
var $el = $('#recline-grid');
var $el = $('#mygrid');
var grid = new recline.View.Grid({
model: dataset,
});