[doc][s]: correct index page using it example for new setup for backends and datasets.

index.html

@@ -43,14 +43,17 @@
       <a class="brand" href="#">Recline Data Explorer</a>
       <ul class="nav">
         <li><a href="demo/">Demo</a></li>
-        <li><a href="http://github.com/okfn/recline/">Code</a></li>
+        <li><a href="#docs">Docs</a></li>
+        <li><a href="http://github.com/okfn/recline/">Code on GitHub</a></li>
         <li><a href="http://github.com/okfn/recline/issues">Issues</a></li>
-        <li><a href="http://twitter.com/maxogden">@maxogden</a></li>
-        <li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
       </ul>
       <a class="nav-logo pull-right" href="http://okfn.org/" title="An Open Knowledge Foundation Project">
         <img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" />
       </a>
+      <ul class="nav" style="float: right;">
+        <li><a href="http://twitter.com/maxogden">@maxogden</a></li>
+        <li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
+      </ul>
     </div>
   </div>
 </div>
@@ -98,35 +101,6 @@
     </ul>
     <p><strong>CSS</strong>: 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: <a href="https://github.com/okfn/recline/tree/master/css">https://github.com/okfn/recline/tree/master/css</a>.</p>
 
-    <h2 id="using">Using It</h2>
-    <pre>
-// 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();
-    </pre>
-    <p>More details and examples: see docs below and the <a
-      href="demo/">Demo</a> (hit view source). The javascript you  want for
-    actual integration is in: <a href="demo/js/app.js">app.js</a>.</p>
-
     <h2 id="docs">Documentation</h2>
     <p>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):</p>
@@ -142,7 +116,33 @@ Backbone.history.start();
       <li>FlotGraph: a simple graphing view using <a href="http://code.google.com/p/flot/">Flot</a>.</li>
     </ul>
 
-    <h3>Source</h3>
+    <h3 id="using">Using It</h3>
+    <pre>
+// 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();
+    </pre>
+    <p>More details and examples: see docs below and the <a
+      href="demo/">Demo</a> -- just hit view source (NB: the javascript for the
+    demo is in: <a href="demo/js/app.js">app.js</a>).</p>
+
+
+    <h3>Source Docs (via Docco)</h3>
     <ul>
       <li><a href="docs/model.html">Models</a></li>
       <li><a href="docs/backend.html">Backends</a></li>