Dexie.js動的リストを反復する

Question

私はdexie.jsを使用しています。これはindexDBラッパーです。 Anywhoo、私は、ユーザーのローカルストレージから呼び出される配列を持って、私の関数は、DB内のすべてのリスト項目を反復し、それを表示することになっています。しかし、私の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要素を作成し、繰り返しそのテキストを変更して再挿入していることですそれは異なる場所にあります。