Dexie.js迭代動態列表

Question

我正在使用dexie.js，它是一個indexDB包裝器。任何，我有一個數組，從用戶的本地存儲中調用，我的函數應該遍歷數據庫中的每個列表項並顯示它。但是，點擊我的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

您需要每次都創建一個新的「禮」元素：

//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元素，並一再改變了它的文字和重新插入它在不同的地點。