Iterate 1000+ items in each

controllers.application\.js

import Controller from '@ember/controller';

import $ from 'jquery';
import { A } from '@ember/array';
import { set } from '@ember/object';

export default Controller.extend({
  
  count: A(),
  
  maxCount: A(),
  
  totalCount: 1000,
  
  showList: false,
  
  paginateLimit: 0,
  
  scrollBinded: false,
  
  bindScroll(selector, namespace, scroll_function) {

		let onScroll;

    set(this, 'scrollBinded', true);
    
		onScroll = function(event) {
			return scroll_function(event);
		};

		let eventName = namespace ? 'scroll.' + namespace : 'scroll';

		$(selector).on(eventName, onScroll);

	},
  
  unbindScroll(selector, namespace) {
		
    set(this, 'scrollBinded', false);
    
		let eventName = namespace ? 'scroll.' + namespace : 'scroll';
		$(selector).off(eventName);
	},
  
  actions:{
   
    toggleList(enablePaginate){
      
      let self = this; 
      
      if(enablePaginate){

        self.send('allowPaginate');
      }
      
      if (self.showList){

	        set(self, 'count', self.count.clear());

          set(self, 'paginateLimit', 0);
          self.unbindScroll('.list-wrapper', null);
      } else {

        let arrayList = A();
    
        for(let i=0; i<self.totalCount; i++){

          arrayList.push(i+1);
        }

        set(self, 'maxCount', arrayList);

        if (self.paginateLimit){

          set(self, 'count', arrayList.slice(0, this.paginateLimit));
        } else {

          set(self, 'count', arrayList);
        }
      }
      set(self, 'showList', !self.showList);
    },
    
		allowPaginate(){
     
      set(this, 'paginateLimit', this.paginateLimit ? 0 : 15);
    },
    
    paginateDDList(){

			if(this.paginateLimit){

				let self = this,
					scollListElement = $('.list-wrapper')[0];

        if(!this.scrollBinded){
					
          self.bindScroll('.list-wrapper', null, function(){	

						if (scollListElement.clientHeight + scollListElement.scrollTop > (scollListElement.scrollHeight - 15)) { 	
							
              set(self, 'paginateLimit', self.paginateLimit + 10);
	        			
              set(self, 'count', self.maxCount.slice(0, self.paginateLimit));
						} 
            
            if (self.paginateLimit > self.totalCount){
             
              set(self, 'paginateLimit', self.totalCount);
              self.unbindScroll('.list-wrapper', null);
            }
						
					});
        }
			}
		}
  }
});

templates.application\.hbs

<h1><u>Iterating `{{this.totalCount}}` items in each
	{{#if paginateLimit}} by 15 {{/if}} </u></h1>

( <i> Note :-  If we give "1000+" the UI render will be slow </i> )
<br><br><br>

{{outlet}}

	:: Pagination {{#if paginateLimit}} Enabled {{else}} Disabled {{/if}}
   
  {{#unless count}} 
	  
    &nbsp;&nbsp; => &nbsp;&nbsp; 
		<button {{action 'allowPaginate'}}> 
    	{{#if paginateLimit}} Disable 		{{else}}  Allow{{/if}} paginate 		</button>
  
  {{/unless}}
	
  <br><br><br>

  :: Total items : {{input value=totalCount}} &nbsp;
  <button {{action 'toggleList'}}> 
	       {{#if showList}} 
         		Hide
         {{else}}
            Show 
         {{/if}} list 
  </button> 
  
  {{#unless showList}} 
  
    {{#unless paginateLimit}}
  &nbsp;&nbsp; OR  &nbsp;&nbsp; <button {{action 'toggleList' true}}> 
           {{#if showList}} 
              Hide
           {{else}}
             Enable Paginate & Show 
           {{/if}} list 
    </button>
    {{/unless}} 
  {{/unless}}
  
  {{#if count}}
  	 &nbsp;&nbsp; => &nbsp;&nbsp; 
  	<b style='color:brown;'>
      {{#if paginateLimit}}
        {{paginateLimit}}
      {{else}}
        {{totalCount}}
      {{/if}} items loaded.
    </b>
  {{/if}}
  
<br><br>
{{#if showList}}
 
 <div class='list-wrapper' style='max-height:430px;overflow-y:auto;border:ridge 1px;background:aliceblue;' {{action 'paginateDDList' on='mouseEnter'}}>
 <ul style="list-style-type: none;">
     {{#each count as |number|}}
	     <hr>
	     <li><br>
		     <center>
  		     <b> {{number}} </b>
	    	 </center><br>
      </li>
    {{/each}}
</ul> 
 </div>   
 
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}