Programming CouchDB with Javascript Revision 5fad86446386 (Tue Dec 16 2008 at 17:18) - Diff Link to this snippet: https://friendpaste.com/ZGASyFWVMIuvFlCYDkjfL Embed: manni perldoc borland colorful default murphy trac fruity autumn bw emacs pastie friendly Show line numbers Wrap lines 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112<!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>