Dexie.js 迭代动态列表

Question

我正在使用 dexie.js，它是一个 indexDB 包装器。 Anywhoo，我有一个从用户本地存储调用的数组，我的函数应该遍历数据库中的每个列表项并显示它。但是，单击我的 Butane 后，它只显示最近输入的名称。

注意：您可以通过在其中添加一些值并检查您的本地存储来查看整个数据库。

我的 JsFiddle： https://jsfiddle.net/enzp3zws/1/

我的html:

<ul id="mane"></ul>

我的js:

var db = new Dexie("TestDatabase");
db.version(1).stores({
    friends: '++id, name, age'
});
var collection = db.friends;
var placement = document.getElementById('rainman');
var jacement = document.getElementById('rainboy');
var stacement = document.getElementById('mane');
var listed = document.createElement('li');

function addrain(){
    collection.each(function(friend){
    var element = [friend.name];
    for (var i = 0; i < element.length; i++){ 
    listed.textContent = element[i];
    document.getElementById('mane').appendChild(listed);
    //alert(element); <-- this call alerts all names in database.  
    }   
});
}

请原谅其中一些变量名称的随机性。我不知道什么是睡眠了。

Answer 1

您需要每次创建一个新的 'li' 元素：

//Remove var listed = ... line in header, then:
function addrain(){
    collection.each(function(friend){
        var element = [friend.name];
        for (var i = 0; i < element.length; i++){ 
            var listed = document.createElement('li');
            listed.textContent = element[i];
            document.getElementById('mane').appendChild(listed);
        }
        //alert(element); <-- this call alerts all names in database.  
    });
}

您的代码之前不起作用的原因是您只创建了一个 li 元素，并反复更改其文本并在不同位置重新插入它。

Dexie.js 迭代动态列表

Dexie.js iterating a dynamic list

javascript

dexie