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



  • 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>
    

  • Onsen UI

    @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.


Log in to reply