3. Is lazy repeat working in onsen v2 with jquery ?

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.

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 ?

    0 1 Reply
  • 侍

    @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

    0