Collection-repeat

Negli esempi relativi alla liste abbiamo utilizzato la direttiva Angular ng-repeat per popolarle di contenuti. Sebbene l’utilizzo della direttiva standard sia perfettamente lecito, Ionic mette a disposizione una direttiva alternativa pensata ed ottimizzata per la visualizzazione di numerosi elementi su dispositivi con schermi di dimensioni ridotte. Si tratta della direttiva collection-repeat il cui uso è esattamente identico a quello di ng-repeat:

<ion-list> 
 	<ion-item collection-repeat="citta in elencoCitta"> 
 		{{citta}} 
 	</ion-item> 
</ion-list>

A differenza di ng-repeat, tuttavia, la direttiva collection-repeat effettua il rendering dei soli elementi visibili sullo schermo. Questo vuol dire che la creazione degli elementi del DOM che rappresentano la lista avviene dinamicamente in base alla porzione di dati da visualizzare a video, con un notevole risparmio di risorse di calcolo ed una maggiore responsività.

Infinite scroll

Possiamo utilizzare collection-repeat per realizzare una sorta di lista infinita, cioè una lista il cui contenuto viene caricato dinamicamente quando l’utente raggiunge la fine della schermata corrente. Tuttavia la direttiva si limita al rendering dinamico della direttiva e non si occupa del caricamento dinamico dei dati dal server. Per realizzare una lista infinita di quest’ultimo tipo occorre caricare dinamicamente gli elementi della lista dal server quando servono. Per ottenere questo comportamento, Ionic prevede la direttiva ion-infinite-scroll, il cui utilizzo di base è mostrato dal seguente markup:

<div ng-controller="listController"> 
	<ion-list> 
		<ion-item ng-repeat="citta in elencoCitta"> 
			{{citta}} 
		</ion-item> 
	</ion-list> 
	<ion-infinite-scroll on-infinite="caricaCitta()"></ion-infinite-scroll> 
</div>

La lista iniziale mappata sull’array elencoCitta viene visualizzata sullo schermo del dispositivo. Quando l’utente, effettuando lo scrolling, raggiunge la fine dello schermo viene eseguita la funzione caricaCitta() che si occuperà di caricare nella lista nuovi elementi ricevuti dal server. Un esempio di implementazione della funzione caricaCitta() può essere il seguente:

$scope.caricaCitta = function() {
	$http.get("/altreCitta")
	     .then(function(dati) {
			mergeArrays($scope.elencoCitta, dati);
			$scope.$broadcast("scroll.infiniteScrollComplete");
		 }); 
};

La funzione fa una chiamata HTTP verso un URL del server e riceve le nuove città che vengono unite all’elenco corrente delle città. È fondamentale che dopo il caricamento dei nuovi dati venga generato l’evento scroll.infiniteScrollComplete, senza il quale i nuovi dati non verrebbero visualizzati a video.