如何从 pouchdb 数据填充 jquery 移动列表视图

Question

我正在使用 jquery mobile 和 pouchdb 开发简单的移动应用程序。我通过此链接 http://pouchdb.com/getting-started.html 遵循教程。

我正在尝试填充从 pouchdb 数据中检索的 Jquery Mobile 列表视图。例如姓名（David），每个姓名都将链接到一个新页面，该页面提供了完整的信息，例如其电子邮件、年龄等。

我卡在了这条线上

函数 redrawUi(mydb) {

这是一个源代码。 http://jsfiddle.net/Vanilla/p2u8wc5p/

提前致谢。

var db = new PouchDB('mydb');
var remoteCouch = 'http://localhost:5984/mydb';

db.info(function(err, info) {
  db.changes({
    since: info.update_seq,
    live: true
  }).on('change', showTodos);
});


db.put({
  _id: new Date().toISOString(),
  email: 'dave@gmail.com',
  name: 'David',

});

db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});

db.replicate.to('http://127.0.0.1:5984/mydb');
db.replicate.from('http://127.0.0.1:5984/mydb');

function showdetail() {
  db.allDocs({
    include_docs: true,
    descending: true
  }).then(function(doc) {
    redrawUi(doc.rows);
  }).

  catch(function(err) {
    console.log(err);

  });
}

function redrawUi(mydb) {



});
}

Answer 1

假设您返回一个包含 id、name 和 email 的对象数组。您只需迭代数组，创建 listitem 标记并将其附加到现有的 listview DOM 元素，例如：

function redrawUi(mydb) {
    var itemsHTML = '';
    for (var i=0; i<mydb.length; i++){
        itemsHTML += '<li>' + mydb[i].name + ' - ' + mydb[i].email + '</li>';
    }
    $("#list").empty().append(itemsHTML).listview("refresh");
}