Mercurial > browser-couch

diff tutorial.html @ 70:36e47760ee5b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added a work-in-progress tutorial that auto-generates parts of itself.
author Atul Varma <varmaa@toolness.com>
date Mon, 20 Apr 2009 13:13:33 -0700
parents
children 8f0b18026782
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tutorial.html	Mon Apr 20 13:13:33 2009 -0700
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="css/tutorial.css" />
+  <title>Blog Example</title>
+</head>
+<body>
+<div id="content" class="documentation">
+<h1>Using BrowserCouch</h1>
+
+<p>Suppose we want to add offline support for a blog.  To get a
+database called <tt>blog-posts</tt> in BrowserCouch, you can use the
+following function:</p>
+
+<div class="example-code">
+BrowserCouch.get('blog-posts', onRetrieveDb, new FakeStorage());
+</div>
+
+<p>It's clear that the first parameter is the name of the database we
+want; the second parameter is the callback that will be passed the
+database once it's fetched. The third parameter is optional, and
+specifies the engine that will be used to persistently store our
+database. In this case we're using a storage backend
+called <tt>FakeStorage</tt>, which just stores everything
+non-persistently in memory, because this is just a tutorial. We could
+just as easily leave out the third parameter to have BrowserCouch
+figure out the best storage backend based on our browser's
+capabilities.</p>
+
+<p>If the database doesn't already exist, an empty one will be created
+for us. Putting blog posts into the database can be done via
+an <tt>onRetrieveDb()</tt> function like this:</p>
+
+<div class="example-code">
+function onRetrieveDb(db) {
+  gBlogPosts = db;
+  gBlogPosts.put(
+    [{id: 0, author: 'Myk', title: 'Burritos', content: 'Burritos are yum.'},
+     {id: 1, author: 'Thunder', title: 'Bacon', content: 'I like bacon.'}],
+    onCommitted
+  );
+};
+</div>
+
+<p>Every item we put into our database needs to have an <tt>id</tt>
+attribute, but aside from that, the item can contain any
+JSON-encodable data.</p>
+
+<p>Now it's possible to make a view that organizes all the posts by
+author:</p>
+
+<div class="example-code">
+function onCommitted() {
+  gBlogPosts.view({
+    map: function(doc, emit) {
+      emit(doc.author, doc);
+    },
+    finished: function(result) {
+      displayInElement(result, 'author-keyed-view');
+    }
+  });
+}
+</div>
+
+<p>The output placed in the <tt>author-keyed-view</tt> element is:</p>
+
+<div class="example-output" id="author-keyed-view">
+</div>
+
+<script src="js/ext/jquery.js"></script>
+<script src="js/browser-couch.js"></script>
+<script src="js/tutorial.js"></script>
+</body>
+</html>