2014-11-25 11 views
9

Attualmente sto usando l'ultima versione "nighty build" di Ionic.Ionic/Come aspettarsi che una vista memorizzata nella cache venga aggiornata?

Una buona notizia con questa versione è il concetto di cached views:

In vista di default sono memorizzati nella cache per migliorare le prestazioni. Quando una vista è spostata da , il suo elemento è lasciato nel DOM e il suo ambito è disconnesso dal ciclo. Quando si naviga in una vista che è già stata memorizzata nella cache , l'ambito viene quindi ricollegato e l'elemento esistente lasciato nel DOM diventa la vista attiva. Anche questo consente di mantenere la posizione di scorrimento delle viste precedenti.

Interessante, quindi l'ho provato ed è davvero scorrevole.

Tuttavia, mi imbatto in un grave problema UX:

In sostanza, la mia app è composto da 2 tabs.

  • TabA ha lo scopo di visualizzare un carico e elencare le voci.
  • TabB ha lo scopo di visualizzare altri elementi.

Ognuno ha la propria navigazione: elenco e visualizzazione di articoli specifici.
Ovviamente, la prima volta, i dati sono freschi, ma poi, poiché memorizzati nella cache => non aggiornati.

Le viste memorizzate nella cache sono realmente adattate al pulsante "indietro" da "mostra" a "elenco" di una scheda specifica.
Infatti, lo scorrimento viene mantenuto e i controller non devono ricaricare => prestazioni molto buone.

Tuttavia, ciò che un utente desidera quando fa clic su una determinata scheda è quello di ottenere un elenco aggiornato.

Non riesco davvero a trovare un modo carino ed efficace per aggiornare una vista memorizzata nella cache relativa all'elemento selezionato.

Ho quelli dichiarati stati (mostrando l'esempio per TabA):

 .state('tab', { 
      url: "/tab", 
      abstract: true, 
      templateUrl: "/tabs.tpl.html", 
      controller: 'TabsCtrl' 
     }) 

     .state('tab.tabAList', { 
      url: '/items', 
      views: { 
       'tab-a': { 
        templateUrl: '/tabAList.tpl.html', 
        controller: 'TabACtrl' 
       } 
      } 
     }) 

     .state('tab.tabAShow', { 
      url: '/tabAList/:itemId', 
      views: { 
       'tab-a': { 
        templateUrl: '/tabAShow.tpl.html', 
        controller: 'TabAShowCtrl' 
       } 
      } 
     }); 

Quindi, regolatore tab s' è il genitore di tab.tabAList e tab.tabAShow.

tabList contiene una funzione come:

$scope.reloadItems = function() { 
    //... 
} 

Come per attivare questa funzione quando si fa clic su tabA?
La parte difficile è che il codice TabsCtrl viene eseguito poco prima che venga eseguito il comando nidificato TabAList.
Ho tentato di includere un $rootScope.$broadcast('reloadTheItems',...) con l'attributo on-select della scheda.
Ma l'evento è mancato poiché tabAList non è ancora stato eseguito al momento dell'invio dell'evento.

Qualcuno l'ha provato e ha una soluzione carina? Ripeto, l'obiettivo è: "Ricaricare una vista memorizzata nella cache nella scheda clic su".

risposta

27

È necessario ascoltare l'evento $ionicView.enter per la visualizzazione per TabA.

Poi fare questo dal $scope:

 $scope.$on("$ionicView.enter", function(scopes, states) { 
      if(states.fromCache && states.stateName == "tab.tabAList") { 
       reloadItems(); 
      } 
     }); 

... o qualcosa di simile ...

+0

Esattamente quello che ho appena fatto :) Grazie! 'States.fromCache' è specifico per Ionic? – Mik378

+1

Non c'è bisogno di '$ rootScope'. '$ scope' è sufficiente sin da bambino;) – Mik378

+0

Ok, bene. Diventiamo più saggi di ora :-) –

Problemi correlati