Mercurial > browser-couch

<!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', onRetrieveCb, 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 specifies the engine
that will be used to persistently store our database across browsing
sessions. In this case we're using <tt>FakeStorage</tt>, which just
stores everything non-persistently in memory for the sake of
example. 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>onRetrieveCb()</tt> function like this:</p>

<div class="example-code">
function onRetrieveCb(db) {
  blogDb = db;
  blogDb.put(
    [{id: 0, author: 'Myk', title: 'Burritos', content: 'Burritos are yum.'},
     {id: 1, author: 'Thunder', title: 'Bacon', content: 'I like bacon.'},
     {id: 2, author: 'Thunder', title: 'Beer', content: 'Beer is good too.'}],
    onCommitCb
  );
};
</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 post titles
by author:</p>

<div class="example-code">
function onCommitCb() {
  blogDb.view({
    map: function(doc, emit) {
      emit(doc.author, doc.title);
    },
    finished: function(result) {
      displayInElement(result, 'author-keyed-view');
      tryAnotherView();
    }
  });
}
</div>

<p>The output placed in the <tt>author-keyed-view</tt> element is:</p>

<div class="example-output" id="author-keyed-view">
</div>

<p>We could also try creating another view that adds a
<tt>reduce()</tt> function to group together the blog post titles with
the authors:</p>

<div class="example-code">
function tryAnotherView() {
  blogDb.view({
    map: function(doc, emit) {
      emit(doc.author, doc.title);
    },
    reduce: function(keys, values) {
      return values;
    },
    finished: function(result) {
      displayInElement(result, 'author-titles-view');
    }
  });
}
</div>

<p>The output is as follows:</p>

<div class="example-output" id="author-titles-view">
</div>

<script src="js/ext/jquery.js"></script>
<script src="js/browser-couch.js"></script>
<script src="js/tutorial.js"></script>
</body>
</html>
author	Atul Varma <varmaa@toolness.com>
date	Mon, 20 Apr 2009 13:37:10 -0700
parents	8f0b18026782
children	17ce8b6be452