26875


MonacaでonsenUIのons-list内のons-list-itemをDBから取得したデータで複数生成しようと考えています。  
下のように記述しているのですが、ons-list-itemがJavascriptのfor文の最後の周回で取得した物しか生成されません。  
初心者でわからないことだらけなので、助言していただければ大変ありがたいです。  
よろしくお願いします。

index.html

>
[code]

>     <ons-list id="ons-list">
>          <ons-list-item modifier="chevron" class="item" id="ons-list-item">
>                <!--ここにDBから取得して表示-->
>          </ons-list-item>
>     </ons-list>
>  
[/code]

DB.js

>
[code]

>     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);
>                     }
>                 }
>             );
>         });
>     }
>  
[/code]

回答があり解決しました！  
for文の中でons-list-itemをcreateElementで生成してからinnerHTMLをする必要があったようです。  
ありがとうございました。

>
[code]

>       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);
>  
[/code]


CC BY-SA 3.0
2016-06-19T08:33:13.997
26859
2016-06-20T14:18:03.480
2016-06-20T14:18:03.480
16879
16879
question
javascript monaca onsen-ui html5
Monaca/Onsen UI でDBの内容でons-list-itemを生成しても、一番最後の物しか表示されない


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


CC BY-SA 3.0
2016-06-20T00:59:27.253
26875
2016-06-20T00:59:27.253
6040
26859
answer