0

我是 JQuery 的新手，只是想通过遵循这个来感受一下 Couchapp

到目前为止，我想出了这个-

我在 db 'addressbook' 中创建了两个文档

curl -X PUT http://127.0.0.1:5984/addressbook    
curl -X PUT http://127.0.0.1:5984/addressbook/Fred -d '{"type":"address","name":"Fred","mobile":"555-0001"}'    
curl -X PUT http://127.0.0.1:5984/addressbook/Barney -d '{"type": "address", "name": "Barney", "mobile": "555-0002"}'

\addressbook\_attachments\index.html 

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Simple address book</title>  
    <link rel="stylesheet" href="style/main.css" type="text/css">  
<span style="white-space: pre;"> </span><script src="/_utils/script/json2.js"></script>  
<span style="white-space: pre;"> </span><script src="/_utils/script/jquery.js"></script>  
<span style="white-space: pre;"> </span><script src="/_utils/script/jquery.couch.js"></script> 
  </head>  
  <body>  
    <h1>Simple address book</h1>  
<span style="white-space: pre;"> </span><div id="add"><button type="button" id="add">Add</button></div>  
    <div id="addressbook">  
    </div>
  </body> 
<script src="vendor/couchapp/loader.js"></script>
</script>     
</html>

\addressbook\vendor\couchapp\_attachments\loader.js

function couchapp_load(scripts) {
  for (var i=0; i < scripts.length; i++) {
    document.write('<script src="'+scripts[i]+'"><\/script>')
  };
};

couchapp_load([
  "/_utils/script/sha1.js",
  "/_utils/script/json2.js",
  "/_utils/script/jquery.js",
  "/_utils/script/jquery.couch.js",
  "vendor/couchapp/jquery.couch.app.js",
  "vendor/couchapp/jquery.couch.app.util.js",
  "vendor/couchapp/jquery.mustache.js",
  "vendor/couchapp/jquery.evently.js"  
]);

$db = $.couch.db("addressbook");
function refreshAddressbook() {
    $("div#addressbook").empty();
    $db.view("addressbook/phonenumbers", {
        success : function (data) {
            for (i in data.rows) {
                id = data.rows[i].id;
                name = data.rows[i].key;
                phonenumber = data.rows[i].value;
                html = '<div class="address">' +
                    '<span class="name">' + name + '</span> ' +
                    '<span class="phonenumber">' + phonenumber + '</span> ' +
                    '<a href="#" id="'+ id +'" class="edit">edit</a> ' +
                    '<a href="#" id="'+ id +'" class="delete">delete</a> ' +
                    '</div>';
                $("div#addressbook").append(html);
            }
        }
    });
}

$(document).ready(function () {
    refreshAddressbook();   
});

$(document).ready(function () {
$("div#addressbook").click(function (event) {
    var $tgt = $(event.target);
    if ($tgt.is('a')) {
        id = $tgt.attr("id");               
        if ($tgt.hasClass("edit")) {
            // TODO: implement edit functionality
        }
        if ($tgt.hasClass("delete")) {
            html = '<span class="deleteconfirm">Sure? <a href="#" class="dodelete">Yes</a> <a href="#" class="canceldelete">No</a></span>';
            $tgt.parent().append(html);
        }
        if ($tgt.hasClass("dodelete")) {
            $db.openDoc(id, {
                success : function (doc) {
                    $db.removeDoc(doc, {
                        success : function () {
                            $tgt.parents("div.address").remove();
                        }
                    })
                }
            });
        }
        if ($tgt.hasClass("canceldelete")) {
            $tgt.parents("span.deleteconfirm").remove();
        }
    }
});
});

但是，我无法进行文档删除工作 - 我试图调试并且当我说清楚时 id = $tgt.attr("id"); - id 在这里是空的。

我必须在这里遗漏一些微不足道的东西。任何指针都会很棒。

4

1 回答 1

1

我现在正在做同样的事情。问题是您必须为各个链接分配一个 ID。对于原始链接：

html = '<div class="address">' +
   '<span class="name">' + name + '</span> ' +
   '<span class="phonenumber">' + phonenumber + '</span> ' +
   '<a href="#" class="edit" id = "' + id + '">edit</a> '+
   '<a href="#" class="delete" id = "' + id + '">delete</a> '+
   '</div>';

对于删除函数中的“dodelete”行：

html = '<span class="deleteconfirm">Sure? <a href="#" class="dodelete" id = "' + id + '">Yes</a> <a href="#" class="canceldelete">No</a></span>';

现在 removeDoc 调用有一些值得关注的地方。

于 2011-11-20T20:06:41.070 回答