From 03fe9a5a6ac8b56925db6e010c65dd2cb51d6b7c Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 4 Jul 2012 14:52:12 +0100 Subject: [PATCH] [#113,docs/tutorials][s]: split tutorials up more. --- _includes/tutorial-basics-ex-2.js | 8 +++- css/site/site.css | 4 +- docs/tutorial-basics-events.markdown | 55 ++++++++++++++++++++++++++++ docs/tutorial-basics-query.markdown | 46 +++++++++++++++++++++++ docs/tutorial-basics.markdown | 53 --------------------------- docs/tutorials.html | 46 +++++++++++++++++++++++ 6 files changed, 156 insertions(+), 56 deletions(-) create mode 100644 docs/tutorial-basics-events.markdown create mode 100644 docs/tutorial-basics-query.markdown create mode 100644 docs/tutorials.html diff --git a/_includes/tutorial-basics-ex-2.js b/_includes/tutorial-basics-ex-2.js index 79b937ae..37f2bfbb 100644 --- a/_includes/tutorial-basics-ex-2.js +++ b/_includes/tutorial-basics-ex-2.js @@ -8,6 +8,12 @@ var $el = $('.ex-2'); // (even for the case of in memory data where querying in fact happens synchronously) // On completion the display function will be called dataset.query({q: 'UK', size: 2}).done(function() { - display(dataset); + $('.ex-2').append('Total found: ' + dataset.recordCount); + $('.ex-2').append(' Total returned: ' + dataset.currentRecords.length); + $('.ex-2').append( + $('
').html(
+      JSON.stringify(dataset.currentRecords.toJSON(), null, 2)
+    )
+  );
 });
 
diff --git a/css/site/site.css b/css/site/site.css
index 0b8989f2..600d4706 100644
--- a/css/site/site.css
+++ b/css/site/site.css
@@ -164,8 +164,8 @@ section.grey:after {
   height: 60px;
 }
 
-.tutorials {
-  margin-bottom: 300px;
+.tutorials:last-child {
+  margin-bottom: 200px;
 }
 
 /** Code / Pre **/
diff --git a/docs/tutorial-basics-events.markdown b/docs/tutorial-basics-events.markdown
new file mode 100644
index 00000000..c66359f9
--- /dev/null
+++ b/docs/tutorial-basics-events.markdown
@@ -0,0 +1,55 @@
+---
+layout: container
+title: Tutorial - Dataset Basics - Events
+recline-deps: true
+root: ../
+---
+
+

+  

+    Dataset Basics - Events
+  

+

+
+
+## Preparations
+
+See first Dataset basics tutorial for getting setup and initializing Dataset.
+
+
+
+## Listening for Events
+
+Often you'll want to listen to events on a Dataset and its associated objects. This is easy to do thanks to the use of Backbone model objects which have a [standard set of events](http://backbonejs.org/#FAQ-events).
+
+Here's an example to illustrate:
+
+{% highlight javascript %}
+{% include tutorial-basics-ex-events.js %}
+{% endhighlight %}
+
+
 

+
+
+
+Here's a summary of the main objects and their events:
+
+* Dataset:
+
+  * Standard Backbone events for changes to attributes (note that this will **not** include changes to records)
+  * *query:start / query:end* called at start and completion of a query
+
+* Dataset.currentRecords: Backbone.Collection of "current" records (i.e. those resulting from latest query) with standard Backbone set of events: *add, reset, remove* 
+
+* Dataset.queryState: queryState is a Query object with standard Backbone Model set of events
+
+* Dataset.fields: Backbone Collection of Fields.
+
diff --git a/docs/tutorial-basics-query.markdown b/docs/tutorial-basics-query.markdown
new file mode 100644
index 00000000..d5548f5d
--- /dev/null
+++ b/docs/tutorial-basics-query.markdown
@@ -0,0 +1,46 @@
+---
+layout: container
+title: Tutorial - Dataset Basics
+recline-deps: true
+root: ../
+---
+
+

+  

+    Dataset Basics - Querying
+  

+

+
+## Preparations
+
+See first Dataset basics tutorial for getting setup and initializing Dataset.
+
+
+
+## Querying
+
+The basic thing we want to do with Datasets is query and filter them. This is very easy to do:
+
+{% highlight javascript %}
+{% include tutorial-basics-ex-2.js %}
+{% endhighlight %}
+
+This results in the following. Note how recordCount is now 3 (the total number of records matched by the query) but that currentRecords only contains 2 records as we restricted number of returned records using the size attribute.
+
+
 

+
+
+
+Full details of the query structure and its options can be found in the reference documentation.
+
+Also worth noting is that the last run query is stored as a Query instance in the `queryState` attribute of the Dataset object. Modifying `queryState` will also resulting in a query being run. This is useful when building views that want to display or manage the query state (see, for example, Query Editor or Filter Editor widgets).
+
+
diff --git a/docs/tutorial-basics.markdown b/docs/tutorial-basics.markdown
index 2705c814..9eef195d 100644
--- a/docs/tutorial-basics.markdown
+++ b/docs/tutorial-basics.markdown
@@ -115,56 +115,3 @@ $('.ex-fields-2').html('');
 
 As can be seen the rendering of the field has changed. This is because the `recordSummary` method uses the Record.getFieldValue function which in turn renders a record field using the Field's renderer function. This function varies depending on the type and can also be customized (see the Field documentation).
 
-
-## Querying
-
-The basic thing we want to do with Datasets is query and filter them. This is very easy to do:
-
-{% highlight javascript %}
-{% include tutorial-basics-ex-2.js %}
-{% endhighlight %}
-
-This results in the following. Note how recordCount is now 3 (the total number of records matched by the query) but that currentRecords only contains 2 records as we restricted number of returned records using the size attribute.
-
-
 

-
-
-
-Full details of the query structure and its options can be found in the reference documentation.
-
-Also worth noting is that the last run query is stored as a Query instance in the `queryState` attribute of the Dataset object. Modifying `queryState` will also resulting in a query being run. This is useful when building views that want to display or manage the query state (see, for example, Query Editor or Filter Editor widgets).
-
-
-## Listening for Events
-
-Often you'll want to listen to events on Datasets and its associated objects rather than have to explicitly notify. This is easy to do thanks to the use of Backbone model objects which have a [standard set of events](http://backbonejs.org/#FAQ-events).
-
-Here's an example to illustrate:
-
-{% highlight javascript %}
-{% include tutorial-basics-ex-events.js %}
-{% endhighlight %}
-
-
 

-
-
-
-Here's a summary of the main objects and their events:
-
-* Dataset:
-
-  * Standard Backbone events for changes to attributes (note that this will **not** include changes to records)
-  * *query:start / query:end* called at start and completion of a query
-
-* Dataset.currentRecords: Backbone.Collection of "current" records (i.e. those resulting from latest query) with standard Backbone set of events: *add, reset, remove* 
-
-* Dataset.queryState: queryState is a Query object with standard Backbone Model set of events
-
-* Dataset.fields: Backbone Collection of Fields.
-
diff --git a/docs/tutorials.html b/docs/tutorials.html
new file mode 100644
index 00000000..476a6f8a
--- /dev/null
+++ b/docs/tutorials.html
@@ -0,0 +1,46 @@
+---
+layout: container
+title: Tutorials
+root: ../
+---
+
+

+  

+    Tutorials
+  

+

+
+

+  

+    

+      

+        
Dataset Basics

+      

+    

+    

+      

+        
Dataset Querying

+      

+    

+    

+      

+        
Datasets and Events

+      

+    

+  

+

+
+