Using ons-lazy-repeat on ons-tab on OnsenUI 2 is not work

McGary

I’m a fresh developer using OnsenUI2 . i have faced a problem when using ons-lazy-repeat on “ons-tab” page . There is no any problems when using lazy-repeat without "“ons-tab”

there is an error of page is "Uncaught TypeError : Cannot Set property ‘delegate’ of null

the code is shown below . Could anyone can help me … i confused with this for a whole week…Thank You Very Much . T_T

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.js"></script>
    <script src="components/monaca-jquery/jquery.js"></script>
    
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

    <script>
        
        $(document).ready(function () {
            var menu = $('#menu')[0];
            
            $(document).on("click",".tab_menu",function(){
               menu.open();
            });
            
            $(".tab_list_items").on("click",function(){
                var content = $('#content')[0];
                var tab_id =  $(this).attr("id");
                var page = "";
                
                switch(tab_id){
                    case "tab_home": page = "home.html"; break;
                    case "tab_settings": page = "settings.html"; break;
                    case "tab_about": page = "about.html"; break;
                }
                
                content.load(page)
                .then(menu.close.bind(menu));
            });
        });
        
        ons.ready(function() {
            var infiniteList = document.getElementById('infinite-list');

            infiniteList.delegate = {
                createItemContent: function(index, oldContent) {
                    if (oldContent) {
                        return oldContent;
                    }

                    var $element = $("<div><span style='opacity: 0.7;'><ons-icon icon='fa-spinner' spin='true'></ons-icon> Loading bacon...</span></div>");

                    var request = $.getJSON('https://baconipsum.com/api/?type=meat-and-filler&sentences=1&callback=?', function(data) {
                        $element.text(data[0]);
                    });

                    $element.data('request', request);
                    return $element[0];
                },
                
                countItems: function() {
                  return 1000;
                },
                
                calculateItemHeight: function() {
                  return ons.platform.isAndroid() ? 48 : 44;
                },
                
                destroyItemContent: function(index, element) {
                  var request = $element.data('request');
                  request.abort();
                }
            };
        });
        
    </script>
</head>

<body>
    <ons-page id='index_page'>
        <ons-splitter>
            <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
              <ons-page>
                    <ons-list>
                        <ons-list-item tappable class="list__item__line-height" >
                            Testing List
                        </ons-list-item>
                      </ons-list>
                </ons-page>
            </ons-splitter-side>
            
            <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
        </ons-splitter>
    </ons-page>
</body>
</html>

home.html

<ons-navigator>
   <ons-page>
        <ons-tabbar position="bottom">
            <ons-tab icon="home" label="1" page="p1.html" ></ons-tab>
            <ons-tab icon="ion-ios-time" label="2" page="p2.html"></ons-tab>
            <ons-tab icon="ion-ios-flame" label="3" page="p3.html" active></ons-tab>
            <ons-tab icon="ion-outlet" label="4" page=""></ons-tab>
            <ons-tab icon="ion-android-favorite" label="5" page=""></ons-tab>
            <ons-tab icon="ion-ios-cart" label="6" page=""></ons-tab>
            <ons-tab icon="ion-ios-list" label="7" page=""></ons-tab>   
        </ons-tabbar>
    </ons-page>
</ons-navigator>

p3.html

<ons-navigator id='p3'>
    <ons-page>
        <ons-toolbar>
            <div class="center">Lists</div>
        </ons-toolbar>

        <ons-list>
            <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
        </ons-list>
    </ons-page>
</ons-navigator>

Fran Diox

@McGary The correct place to set up pages in Onsen 2 is in the page init event. More info about page lifecycle events here.

Basically, try to set the delegate object on p3 init event instead of ons.ready.

Using ons-lazy-repeat on ons-tab on OnsenUI 2 is not work browsing