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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • M

    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>
    0 1 Reply
  • 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.

    0