Is lazy repeat working in onsen v2 with jquery ?



  • Hi,

    Following some example found, I’m able to get the lazy repeat to work in onsen v1 with jquery. Code is as belows.

    <!DOCTYPE html>
    <html class=''>
    <head>
        <meta charset='UTF-8'>
        <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
        <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
    </head>
    <body>
        <ons-page>
            <ons-toolbar>
                <div class="center">Lazy Repeat with jQuery</div>
            </ons-toolbar>
    
            <ons-list>
                <ons-list-item ons-lazy-repeat="MyDelegate">
                </ons-list-item>
            </ons-list>
        </ons-page>
        <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    
        <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
        <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
        <script>
    ons.bootstrap();
    var MyDelegate = {
        createItemContent: function (index) {
            console.log('Created item #' + index);
            var $element = $('<span>Item #' + (index + 1) + '</span>');
            return $element[0];
        },
        calculateItemHeight: function (index) {
            return 40;
        },
        countItems: function () {
            return 10000000;
        },
        destroyItemContent: function (index, element) {
            console.log('Destroyed item ' + index);
        }
    };
        </script>
    </body>
    </html>
    
    

    However when I tried to replace it with onsen v2, its is not working.
    Anyone able to do it successfully in v2 ?



  • @Francis-Thong I can’t tell with your code for certain, but I usually have issues with the script being after the elements. Regardless, here is a working infinite list with Onsen 2 and a whole tutorial on how to work with them:

    http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=lazy-repeat


Log in to reply