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.

lazy-repeat refresh method is undefined

  • The refesh method is not used immediately but only when the data is loaded from the server which takes at least a couple of seconds
    Also I made a test where I just basically do exactly as in the sample i.e set the item count to some number, i.e 100, and in configurItemScope just do

    itemScope.item = "item" + index;

    Still the list is empty.
    Perhaps it’s some library that I’m missing? Or version incompatibility?

  • administrators

    Hmmm that’s strange your test isn’t working. Can you try inserting the code exactly from the playground example and see if that works?

    The only thing I can think of right now is that your code uses $scope whereas the playground example is using Controller as controller to reference the scope. Either is fine but both can cause problems so it’s worth checking they’re not accidentally both getting used somewhere.

  • No luck
    SImplified my code as much as possible. It looks like this now

    <ons-page ng-controller="ListController as list">
        <div class="center">Lists</div>
        <div class="right">
          <ons-toolbar-button ng-click="list.doRefresh()">Refresh</ons-toolbar-button>
        <ons-list-item ons-lazy-repeat="list.delegate">{{ item }}</ons-list-item>

    The listcontroller.js

            .controller('ListController', function() {
    		    this.delegate = {
    		      configureItemScope: function(index, itemScope) {
    		        itemScope.item = 'Item ' + index;
    		      countItems: function() {
    		        return 10000;
    		      calculateItemHeight: function() {
    		        return ons.platform.isAndroid() ? 48 : 44;
    			   this.delegate.refresh();//fails because refresh is not defined

    The only remaining difference between the sample and my code is the way onsen framework is initialized
    The sample uses

      .controller('ListController', function() .....

    whereas my code uses

            .controller('ListController', function()....

    Could this be the problem?
    My app main module is defined in another file as follows

    (function () {
       'use strict';    
        var MyApp= angular.module('MyApp', ['onsen','ngCordovaOauth','rzModule', 'swipe'])
        run.$inject = ['$rootScope'];
      function run($rootScope) {
        	//app init
        ons.ready(function() {
           // init plugins

  • administrators

    From the code you provided, I can’t see what would be causing the problem.

    Do the list items themselves show up? (i.e. you get ‘Item 1’, ‘Item 2’, ‘Item 3’, not ‘{{ item }}’). If the list items don’t show up it’s probably because Onsen isn’t loaded properly or you have a typo somewhere.

    I don’t think it’s an Onsen version problem because I tried 2.10.1, 2.10.5 and 2.10.6 and they all worked for me.

    I also don’t think it’s caused by using angular.module instead of ons.bootstrap because I got it working fine with angular.module.

    There are a few other things you might be able to try:

    1. If it’s an open source project, put the project on GitHub and I’ll clone it and take a look at it.
    2. If it’s not an open source project but you don’t mind sharing some of the code, make the smallest possible working example and put it on GitHub.
    3. If it’s a Monaca project, contact Monaca support. You’ll need a paid plan but they’ll clone your project and figure out why it’s not working.

  • This is not an open source project .
    One thing that I’m suspicious of is the way the project is set up.
    It started as a Monaca project online IDE but then was copied locally and development continued. So the project index.html file does not inclde onsenui.js,angular.js etc. but instead includes loader.js
    However all other framework elements work just fine. The project uses ons-list, ons-tabbar, ons-navigator, ons-modal, etc and everything works,lazy-repeat is the only one thing that does not.
    Perhaps I neeed to revisit the way the project is organized ,get rid of the loader.js and use standard onsenui.js, angular.js and whatever else may be needed.
    Can you point me to a sample Onsen Angular JS skeleton project?

  • @heel_curve5, in Local Kit, create a new project and select the type you want.


  • Thank you so much for pointing me to that tool. I was able to get the lazy list to work - created a skeleton Angular JS project,added the lazy load sample code to it and it worked!
    However here is another problem.
    It only works if the app is bootstrapped with my app=ons.bootstrap()…etc etc, like in the sample. My app is structured differently. I have a main module that is defined like this


    (function () {
    'use strict';  
    var MyApp= angular.module('SmartConApp', ['onsen,'ngCordovaOauth','rzModule', 'swipe'])
        run.$inject = ['$rootScope']; 	
        function run($rootScope, {
        	LogIt("APP MAIN");
        	// app initialization
        ons.ready(function() {	
            LogIt("Onsen UI is ready!"); 
            // init plugins

    The problem is that ons-ready is never called and neither is the run function
    Any ideas?
    Thank you so much for help

  • administrators

    It might be that you don’t have ng-app defined in your HTML. That was one thing that tripped me up when I tried to convert the example to use angular.module instead of ons.bootstrap.

  • @emccorson said in lazy-repeat refresh method is undefined:


    That was it! Now it works
    Thank you all very much for help!