Mercurial > browser-couch

annotate tutorial.html @ 74:4450be5d1b2f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added reduce() example to the tutorial.
author Atul Varma <varmaa@toolness.com>
date Mon, 20 Apr 2009 13:37:10 -0700
parents 8f0b18026782
children 17ce8b6be452
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
4 <head>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
6 <link rel="stylesheet" type="text/css" media="all"
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
7 href="css/tutorial.css" />
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
8 <title>Blog Example</title>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
9 </head>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
10 <body>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
11 <div id="content" class="documentation">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
12 <h1>Using BrowserCouch</h1>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
13
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
14 <p>Suppose we want to add offline support for a blog. To get a
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
15 database called <tt>blog-posts</tt> in BrowserCouch, you can use the
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
16 following function:</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
17
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
18 <div class="example-code">
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
19 BrowserCouch.get('blog-posts', onRetrieveCb, new FakeStorage());
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
20 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
21
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
22 <p>It's clear that the first parameter is the name of the database we
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
23 want; the second parameter is the callback that will be passed the
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
24 database once it's fetched. The third parameter specifies the engine
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
25 that will be used to persistently store our database across browsing
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
26 sessions. In this case we're using <tt>FakeStorage</tt>, which just
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
27 stores everything non-persistently in memory for the sake of
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
28 example. We could just as easily leave out the third parameter to have
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
29 BrowserCouch figure out the best storage backend based on our
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
30 browser's capabilities.</p>
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
31
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
32 <p>If the database doesn't already exist, an empty one will be created
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
33 for us. Putting blog posts into the database can be done via
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
34 an <tt>onRetrieveCb()</tt> function like this:</p>
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
35
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
36 <div class="example-code">
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
37 function onRetrieveCb(db) {
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
38 blogDb = db;
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
39 blogDb.put(
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
40 [{id: 0, author: 'Myk', title: 'Burritos', content: 'Burritos are yum.'},
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
41 {id: 1, author: 'Thunder', title: 'Bacon', content: 'I like bacon.'},
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
42 {id: 2, author: 'Thunder', title: 'Beer', content: 'Beer is good too.'}],
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
43 onCommitCb
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
44 );
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
45 };
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
46 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
47
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
48 <p>Every item we put into our database needs to have an <tt>id</tt>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
49 attribute, but aside from that, the item can contain any
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
50 JSON-encodable data.</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
51
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
52 <p>Now it's possible to make a view that organizes all the post titles
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
53 by author:</p>
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
54
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
55 <div class="example-code">
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
56 function onCommitCb() {
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
57 blogDb.view({
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
58 map: function(doc, emit) {
73
8f0b18026782 Changed around a few things in the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 70
diff changeset
59 emit(doc.author, doc.title);
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
60 },
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
61 finished: function(result) {
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
62 displayInElement(result, 'author-keyed-view');
74
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
63 tryAnotherView();
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
64 }
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
65 });
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
66 }
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
67 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
68
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
69 <p>The output placed in the <tt>author-keyed-view</tt> element is:</p>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
71 <div class="example-output" id="author-keyed-view">
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
72 </div>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
73
74
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
74 <p>We could also try creating another view that adds a
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
75 <tt>reduce()</tt> function to group together the blog post titles with
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
76 the authors:</p>
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
77
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
78 <div class="example-code">
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
79 function tryAnotherView() {
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
80 blogDb.view({
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
81 map: function(doc, emit) {
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
82 emit(doc.author, doc.title);
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
83 },
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
84 reduce: function(keys, values) {
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
85 return values;
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
86 },
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
87 finished: function(result) {
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
88 displayInElement(result, 'author-titles-view');
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
89 }
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
90 });
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
91 }
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
92 </div>
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
93
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
94 <p>The output is as follows:</p>
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
95
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
96 <div class="example-output" id="author-titles-view">
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
97 </div>
4450be5d1b2f Added reduce() example to the tutorial.
Atul Varma <varmaa@toolness.com>
parents: 73
diff changeset
98
70
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
99 <script src="js/ext/jquery.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
100 <script src="js/browser-couch.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
101 <script src="js/tutorial.js"></script>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
102 </body>
36e47760ee5b Added a work-in-progress tutorial that auto-generates parts of itself.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
103 </html>