0

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);

1 件の回答 1

0

onsListItem.innerHTMLの中身を毎回上書きしているので、最後のものしか生成されません。
for文でons-rowを生成するのではなくons-list-itemを生成してonsListに追加してみましょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。