- Learn
- Guida Ionic Framework
- Collection-repeat
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.
Se vuoi aggiornamenti su JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
How to migrate from VMware vSphere to Microsoft Hyper-V
La sessione di Andrea Mauro descrive le differenze tra i due ambienti, sia in termini di funzionalità che di archittettura, […]