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

_includes/data.js

@@ -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}
+];
+

example-quickstart.markdown

@@ -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 = [
+{% include data.js %}
-    {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'}
-  ];
 {% 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 = [
+{% include data.js %}
-    {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'}
-  ];
 var dataset = recline.Backend.createDataset(data);
-var $el = $('#recline-grid');
+var $el = $('#mygrid');
 var grid = new recline.View.Grid({
   model: dataset,
 });