Monaca/Onsen UI でDBの内容でons-list-itemを生成しても、一番最後の物しか表示されない
MonacaでonsenUIのons-list内のons-list-itemをDBから取得したデータで複数生成しようと考えています。
下のように記述しているのですが、ons-list-itemがJavascriptのfor文の最後の周回で取得した物しか生成されません。
初心者でわからないことだらけなので、助言していただければ大変ありがたいです。
よろしくお願いします。
index.html
<ons-list id="ons-list"> <ons-list-item modifier="chevron" class="item" id="ons-list-item"> <!--ここにDBから取得して表示--> </ons-list-item> </ons-list>
DB.js
function DBLoad(){ //DB接続 var db = openDatabase('DBName', '1.0', 'DataBase', 1024 * 1024 * 5); db.readTransaction(function(transaction){ transaction.executeSql('SELECT * FROM DBtable',[], function(transaction, result){ var onsList = document.getElementById('ons-list'); //DBの結果の数だけons-list-item生成 for (var i = 0; i< result.rows.length; i++){ var ResultSet = result.rows.item(i).task; var onsListItem = document.getElementById('ons-list-item'); onsListItem.innerHTML = "<ons-row>"+ "<ons-col class = 'ons-col' width='20px' align='center'>"+ "<ons-icon class='item-icon' icon='fa fa-building-o' size='20px'></ons-icon>"+ "</ons-col>"+ "<ons-col>"+ "<header>"+ "<span class='item-title' id='item-title'>"+ ResultSet +"</span><br>" "</header>"+ "</ons-col>"+ "</ons-row>" ons.compile(onsListItem); onsList.appendChild(onsListItem); } } ); }); }
回答があり解決しました!
for文の中でons-list-itemをcreateElementで生成してからinnerHTMLをする必要があったようです。
ありがとうございました。
var onsListItem = document.createElement("ons-list-item"); onsListItem.innerHTML ="<ons-row>"+ "<ons-col class = 'ons-col' width='30px' align='center'>"+ "<ons-icon class='item-icon' icon='fa fa-building-o' size='20px' fixed-width='false' style='color: blue'></ons-icon>"+ "</ons-col>"+ "<ons-col>"+ "<header>"+ "<span class='item-title' id='item-title'>"+ ResultSet +"</span><br>"+ "<span class='item-label' id='item-label'>2015-3-12 9:00</span>"+ "</header>"+ "</ons-col>"+ "</ons-row>"; onsList.appendChild(onsListItem); ons.compile(onsListItem);