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


        <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">
            $(document).ready(function () {
                var menu = $('#menu')[0];
                    var content = $('#content')[0];
                    var tab_id =  $(this).attr("id");
                    var page = "";
                        case "tab_home": page = "home.html"; break;
                        case "tab_settings": page = "settings.html"; break;
                        case "tab_about": page = "about.html"; break;
            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('', function(data) {
                        $'request', request);
                        return $element[0];
                    countItems: function() {
                      return 1000;
                    calculateItemHeight: function() {
                      return ons.platform.isAndroid() ? 48 : 44;
                    destroyItemContent: function(index, element) {
                      var request = $'request');
        <ons-page id='index_page'>
                <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
                            <ons-list-item tappable class="list__item__line-height" >
                                Testing List
                <ons-splitter-content id="content" page="home.html"></ons-splitter-content>


            <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-navigator id='p3'>
                <div class="center">Lists</div>
                <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>

  • 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