Friendpaste - Programming CouchDB with Javascript

kqwCKgcZ / Programming CouchDB with Javascript

Revision 5fad86446386 (7 months, 1 week ago) - Diff

Link to this snippet : http://friendpaste.com/kqwCKgcZ

Wrap long lines
Show line numbers

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8"/>
        <title>My Todos</title>
        <script src="../script/couch.js" type="text/javascript" charset="utf-8"></script>
        <script src="../script/json.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
        function $(e)
        {
            return document.getElementById(e);
        }

        var Couch_Todo = 
        {
            _todos:{},
            db: new CouchDB("todo"),

            insert: function(todo)
            {
                // DOM-fu
                var list_item = document.createElement("li");
                list_item.innerHTML = todo.text + ' <a href="#" onClick="Couch_Todo.remove(this.parentNode); return false;">X</a>';

                $("todos").insertBefore(list_item, $("todos").firstChild);

                this._todos[todo._id] = todo; // save todo object, so we can access the _rev when we want to delete.
                list_item.id = todo._id; // save new id in DOM object

                this.updateEmpty();
            },

            add: function(todo)
            {
                //automatically save time
                todo.time = (new Date()).getTime();
                this.db.save(todo);
                this.insert(todo);
            },

            load:function()
            {
                var all_docs = this.db.view("todo/all");

                if(all_docs && all_docs.total_rows > 0) {
                    for(var idx = 0; idx < all_docs.total_rows; idx++) {
                        var todo = all_docs.rows[idx];
                        this.insert({
                            _id:todo.id,
                            _rev:todo.value.rev,
                            text:todo.value.text
                        });
                    }
                }
            },

            remove:function(li)
            {
                var doc = this._todos[li.id];
                this.db.deleteDoc(doc);
                this._todos[li.id] = null;

                $("todos").removeChild($(li.id));
                this.updateEmpty();

                // focus the input field
                $("todo").focus();
            },

            updateEmpty: function()
            {
                //if there are no todos, show a message
                $("empty").style.display = (0 == $("todos").childNodes.length)?"block":"none";
            }
        }    

        window.onload = function()
        {
            // load saved todos
            Couch_Todo.load();

            // what to do when hitting enter in the input field
            $("add").onsubmit = function()
            {
                var value = $("todo").value;
                $("todo").value = ""; // reset input box
                if(value) { // don't add empty todos
                    Couch_Todo.add({text:value});
                }

                // don't submit the form
                return false;
            }

            // focus the input field when the document loads
            $("todo").focus();
        }
        </script>
    </head> 

    <body id="index">
        <form id="add" action="">
                <input type="text" name="todo" value="" id="todo"/>
        </form>

        <ul id="todos"></ul>

        <div id="empty">Enter todo items in the box above and hit enter.</div>
    </body>
</html>

        

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4	<head>
5	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8"/>
6	<title>My Todos</title>
7	<script src="../script/couch.js" type="text/javascript" charset="utf-8"></script>
8	<script src="../script/json.js" type="text/javascript" charset="utf-8"></script>
9
10	<script type="text/javascript" charset="utf-8">
11	function $(e)
12	{
13	return document.getElementById(e);
14	}
15
16	var Couch_Todo =
17	{
18	_todos:{},
19	db: new CouchDB("todo"),
20
21	insert: function(todo)
22	{
23	// DOM-fu
24	var list_item = document.createElement("li");
25	list_item.innerHTML = todo.text + ' <a href="#" onClick="Couch_Todo.remove(this.parentNode); return false;">X</a>';
26
27	$("todos").insertBefore(list_item, $("todos").firstChild);
28
29	this._todos[todo._id] = todo; // save todo object, so we can access the _rev when we want to delete.
30	list_item.id = todo._id; // save new id in DOM object
31
32	this.updateEmpty();
33	},
34
35	add: function(todo)
36	{
37	//automatically save time
38	todo.time = (new Date()).getTime();
39	this.db.save(todo);
40	this.insert(todo);
41	},
42
43	load:function()
44	{
45	var all_docs = this.db.view("todo/all");
46
47	if(all_docs && all_docs.total_rows > 0) {
48	for(var idx = 0; idx < all_docs.total_rows; idx++) {
49	var todo = all_docs.rows[idx];
50	this.insert({
51	_id:todo.id,
52	_rev:todo.value.rev,
53	text:todo.value.text
54	});
55	}
56	}
57	},
58
59	remove:function(li)
60	{
61	var doc = this._todos[li.id];
62	this.db.deleteDoc(doc);
63	this._todos[li.id] = null;
64
65	$("todos").removeChild($(li.id));
66	this.updateEmpty();
67
68	// focus the input field
69	$("todo").focus();
70	},
71
72	updateEmpty: function()
73	{
74	//if there are no todos, show a message
75	$("empty").style.display = (0 == $("todos").childNodes.length)?"block":"none";
76	}
77	}
78
79	window.onload = function()
80	{
81	// load saved todos
82	Couch_Todo.load();
83
84	// what to do when hitting enter in the input field
85	$("add").onsubmit = function()
86	{
87	var value = $("todo").value;
88	$("todo").value = ""; // reset input box
89	if(value) { // don't add empty todos
90	Couch_Todo.add({text:value});
91	}
92
93	// don't submit the form
94	return false;
95	}
96
97	// focus the input field when the document loads
98	$("todo").focus();
99	}
100	</script>
101	</head>
102
103	<body id="index">
104	<form id="add" action="">
105	<input type="text" name="todo" value="" id="todo"/>
106	</form>
107
108	<ul id="todos"></ul>
109
110	<div id="empty">Enter todo items in the box above and hit enter.</div>
111	</body>
112	</html>

View in other formats:
raw format | download source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8"/> <title>My Todos</title> <script src="../script/couch.js" type="text/javascript" charset="utf-8"></script> <script src="../script/json.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> function $(e) { return document.getElementById(e); } var Couch_Todo = { _todos:{}, db: new CouchDB("todo"), insert: function(todo) { // DOM-fu var list_item = document.createElement("li"); list_item.innerHTML = todo.text + ' <a href="#" onClick="Couch_Todo.remove(this.parentNode); return false;">X</a>'; $("todos").insertBefore(list_item, $("todos").firstChild); this._todos[todo._id] = todo; // save todo object, so we can access the _rev when we want to delete. list_item.id = todo._id; // save new id in DOM object this.updateEmpty(); }, add: function(todo) { //automatically save time todo.time = (new Date()).getTime(); this.db.save(todo); this.insert(todo); }, load:function() { var all_docs = this.db.view("todo/all"); if(all_docs && all_docs.total_rows > 0) { for(var idx = 0; idx < all_docs.total_rows; idx++) { var todo = all_docs.rows[idx]; this.insert({ _id:todo.id, _rev:todo.value.rev, text:todo.value.text }); } } }, remove:function(li) { var doc = this._todos[li.id]; this.db.deleteDoc(doc); this._todos[li.id] = null; $("todos").removeChild($(li.id)); this.updateEmpty(); // focus the input field $("todo").focus(); }, updateEmpty: function() { //if there are no todos, show a message $("empty").style.display = (0 == $("todos").childNodes.length)?"block":"none"; } } window.onload = function() { // load saved todos Couch_Todo.load(); // what to do when hitting enter in the input field $("add").onsubmit = function() { var value = $("todo").value; $("todo").value = ""; // reset input box if(value) { // don't add empty todos Couch_Todo.add({text:value}); } // don't submit the form return false; } // focus the input field when the document loads $("todo").focus(); } </script> </head> <body id="index"> <form id="add" action=""> <input type="text" name="todo" value="" id="todo"/> </form> <ul id="todos"></ul> <div id="empty">Enter todo items in the box above and hit enter.</div> </body> </html>
Programming Language
Title

kqwCKgcZ / Programming CouchDB with Javascript

last change Tue Apr 15 22:42:07 2008 (UTC)

Older revisions