ons-lazy-repeatにて表示内容を変更する(javascript)

前提・実現したいこと

ons-lazy-repeat内に、ローカルDBのデータをリストにして表示させ、
さらに、この表示内容を、ユーザのソートリクエスト条件に合わせて変更する。
という機能を実装したいと思い、色々試してはみたのですが、解決方法が見つかりません。
同じ問題を解決された方がいらっしゃいましたらご教授いただけないでしょうか。

※前提、補足

・Angularであれば表示変更する方法について情報がありそうだったのですが、Angularで構築していない為、javascriptだけで表示変更する方法を探しております。

・リストは２００～３００件を見込んでおり、実際に「ons-lazy-repeat」無し（appendchildでDOM構築）で表示すると、機種によっては多少動作が重い印象です。その為できれば「ons-lazy-repeat」を使用したいと思っています。

・大変申し訳ないのですが、周りにアプリ開発者の方もおらず、１年半ほど独学で構築している為、当たり前のことがわかっていないかもしれません。

＜処理概要＞
「ons-lazy-repeat」で表示させるまでの処理は以下の通りです。

１．ユーザがソート条件を選択（idが001～100まで等）

２．ローカルのIndexedDBから、ソート条件にあったデータを抽出し、変数へ代入

３．「ons-lazy-repeat」を描写している関数に表示したいデータを渡す

４．「ons-lazy-repeat」の内容描写

※ユーザが表示を変更したいと思ったら、また１から繰り返し

code
1
2<html>
3～
4<template id="list.html">
5 <ons-page id="listPage"> 
6
7  <div>
8    <ons-list>
9　　　　<ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
10    </ons-list>
11  </div>
12
13 </ons-page>
14</template>
15
16</html>
17
18
19<tmp.js>
20
21//データ格納(1,2の処理の部分を簡潔に記載した形になります）
22let lazyData=[{id:A001 , data1:aaa, data2:bbb }{id:U002 , data1:ccc, data2:ddd }…];
23
24//ons-lazy-repeatの描写
25var makelazy = function(recData,recDataLength){
26
27  var infiniteList = document.getElementById('infinite-list');
28
29  infiniteList.delegate = {
30    createItemContent: function(i) {
31
32  //  =====
33    ここの記載の仕方で悩んでいます
34  //  ====
35
36      return dom;
37
38    },
39    countItems: function() {
40      return recDataLength;
41    },
42　　calculateItemHeight:function() {
43        return 10;
44    //calculateItemHeight:functionがないとエラーになってしまうので入れています。
45    }	
46  };
47  infiniteList.refresh();
48};
49
50
51//makelazyと呼び出し＋データと、データ数を引き渡し
52makelazy(lazyData,lazyData.Length);
53

発生している問題・エラーメッセージ　試したこと

iを引数に、配列を総当たりさせてみました
アプリ起動時は表示されるのですが、makeLazyをもう一度呼び出すと
「TypeError: undefined is not an object (evaluating 'recData[i].id')」
のエラーが出力。
１度だけ表示は変更されますが、それ以降呼び出ししても変更されず、エラーも毎回出力しています。

javascript
1 infiniteList.delegate = {
2    createItemContent: function(i) {
3
4        dom = ons.createElement(
5        '<ons-list>
6         <ons-list-header>name:' + recData[i].id + '</ons-list-header>
7         <ons-list-item>no1' + recData[i].data1 + '</ons-list-item>
8         <ons-list-item>no2' + recData[i].data2 + '</ons-list-item>
9         </ons-list>');
10
11　　　　return dom;
12
13　　},
14～省略～
15
16ソートリクエスト１　全て表示
17name:A001
18no1:aaa
19no2:bbb
20
21name:U002
22no1:ccc
23no2:ddd
24～
25↓
26
27ソートリクエスト２　id U002だけ表示
28name:U002
29no1:ccc
30no2:ddd
31※エラーはでるが表示
32↓
33
34ソートリクエスト３　全て表示
35name:U002
36no1:ccc
37no2:ddd
38※エラー出力、表示も変わらず
39
40

ただ、以下のように配列を使用しない場合は、何回でも表示を変更することができました。

javascript
1//testボタンを適当に配置
2document.querySelector("#test").onclick = function(){
3  
4var infiniteList = document.getElementById('infinite-list');
5var random = Math.ceil( Math.random()*100 );
6
7  infiniteList.delegate = {
8    createItemContent: function(i) {
9      return ons.createElement('<ons-list-item tappable>createItem ' + i + '</ons-list-item>');
10    },
11    countItems: function() {
12      return random;
13    }
14  };
15  infiniteList.refresh();
16}
17
18'
191～100まで、クリックする度にランダム表示
20createItem 1
21createItem 2
22createItem 3
23createItem 4
24…
25'
26
27

その他
・createItemContent内でrecDataをfor～ofループ　→　表示されず。

・infiniteList.createItemContent();という具合で、呼び出して使用する（スコープは意識しました）　→　呼び出せませんでした。

・「.delegate」についても調査しましたが、jqueryのデリゲートの概念くらいしか見つけられず。

・githubの「ons-lazy-repeat.js」も見てみましたが、onsenUI公式の情報以上のことは見つけられませんでした。

長文で大変恐縮なのですが、よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

◆環境
Monaca
cordova 9
onsenUI 2.10.8
wkwebView
ios13.5

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと再現できなかったのと記載されているソースでは文法エラーになるので、参考になるかわかりませんが

html
1<!DOCTYPE html>
2<html>
3<head>
4  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
7</head>
8<body>
9
10<ons-page id="listPage"> 
11 <div>
12   <ons-button onclick="buttonClick()">ボタン</ons-button>
13   <ons-list>
14     <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
15   </ons-list>
16 </div>
17</ons-page>
18
19</body>
20
21<script>
22//データ格納(1,2の処理の部分を簡潔に記載した形になります）
23let lazyData = [
24  { id: 'A001', data1: 'aaa', data2: 'bbb' },
25  { id: 'U002', data1: 'ccc', data2: 'ddd' },
26  { id: 'U002', data1: 'ccc', data2: 'ddd' },
27  { id: 'U002', data1: 'ccc', data2: 'ddd' },
28  { id: 'U002', data1: 'ccc', data2: 'ddd' },
29  { id: 'U002', data1: 'ccc', data2: 'ddd' },
30  { id: 'U002', data1: 'ccc', data2: 'ddd' },
31  { id: 'U002', data1: 'ccc', data2: 'ddd' },
32  { id: 'U002', data1: 'ccc', data2: 'ddd' },
33  { id: 'U002', data1: 'ccc', data2: 'ddd' },
34  { id: 'U002', data1: 'ccc', data2: 'ddd' },
35];
36
37//ons-lazy-repeatの描写
38var makelazy = function(recData, recDataLength){
39  var infiniteList = document.getElementById('infinite-list');
40
41  infiniteList.delegate = {
42    createItemContent: function(i) {
43      dom = ons.createElement(
44      `<ons-list>
45       <ons-list-header>name:${recData[i].id}</ons-list-header>
46       <ons-list-item>no1${recData[i].data1}</ons-list-item>
47       <ons-list-item>no2${recData[i].data2}</ons-list-item>
48       </ons-list>`);
49      return dom;
50    },
51    countItems: function() {
52      return recDataLength;
53    },
54    calculateItemHeight:function() {
55      return 10;
56    }
57  };
58  infiniteList.refresh();
59};
60
61//makelazyと呼び出し＋データと、データ数を引き渡し
62makelazy(lazyData, lazyData.length);
63
64function buttonClick() {
65  let lazyData2 = [
66    { id: 'AAAA001', data1: 'aaaaaaa', data2: 'bbbbbbbb' },
67  ];
68  makelazy(lazyData2, lazyData2.length);
69}
70
71</script>
72</html>

こんな感じだと問題なく動きますね。

投稿2020/06/09 07:25

rururu3

総合スコア5545

machati

2020/06/09 09:34

rururu3様ご回答大変感謝いたします。「${}」というテンプレートリテラルについては知りませんでした。教えて頂いたコードを試したところ表示変更されました。ただ、ボタン連打でエラーになったり、一部のソート条件だけエラーが出たりと安定しない状況ですので、頂いた情報も踏まえてもう一度全体を見直してみます。お陰で一歩前進できました。ご教授ありがとうございました。

machati

2020/06/12 06:06

rururu3様無事、再描画ができるようになりましたのでご報告いたします。一部エラーになっていたのは、コードのミスでした。（配列の数を誤った値で渡していたのが原因でした。）配列の内容と、配列内の数を正確に引き渡して、再度同じコードを実行すれば再描画できることが分かりました。ありがとうございました。