Я новичок в JQuery и просто пытаюсь почувствовать Couchapp, выполнив this
Я до сих пор придумал это -
У меня есть два документа, созданные в БД 'адресная книга'
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 \ поставщика \ 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");
- здесь идентификатор пуст.
Мне, должно быть, здесь не хватает чего-то тривиального.
Любые указатели были бы великолепны.