2014-11-25 4 views
9

Ich verwende derzeit die neueste Ionic "Nighty Build" Version.Ionic/Wie wird erwartet, dass eine zwischengespeicherte Ansicht aktualisiert wird?

Eine gute Nachricht mit dieser Version ist das Konzept der cached views:

von Standardansichten zwischengespeichert werden, die Leistung zu verbessern. Wenn eine Ansicht von weg navigiert wird, verbleibt ihr Element im DOM und ihr Gültigkeitsbereich ist vom Zyklus getrennt. Wenn zu einer Ansicht navigiert wird, die bereits zwischengespeichert ist, wird ihr Bereich dann erneut verbunden, und das vorhandene Element , das im DOM übrig geblieben war, wird zur aktiven Ansicht. Dies ermöglicht auch Scroll-Position von früheren Ansichten beibehalten werden.

Interessant, also habe ich es versucht und es ist wirklich glatt.

Allerdings stoße ich auf eine schwere UX Ausgabe:

Grundsätzlich meine app von 2 tabs zusammengesetzt ist.

  • TabA soll eine Ladung anzeigen und Elemente auflisten.
  • TabB zielt darauf ab, andere Elemente anzuzeigen.

Jeder hat seine eigene Navigation: Auflistung und Anzeige bestimmter Artikel.
Offensichtlich sind die Daten zum ersten Mal frisch, aber dann seit Cached => veraltet.

Zwischengespeicherte Ansichten ist wirklich auf die Schaltfläche "zurück" von der "Show" auf die "Liste" einer bestimmten Registerkarte angepasst.
Scroll ist in der Tat Wartung und Controller müssen nicht neu laden => sehr gute Leistung.

Was ein Benutzer jedoch wünscht, wenn er auf einen bestimmten Tab klickt, ist eine aktualisierte Liste zu erhalten.

Ich finde wirklich keine schöne und effiziente Möglichkeit, eine bestimmte zwischengespeicherte Ansicht in Bezug auf das angeklickte Element zu aktualisieren.

Ich habe diese erklärt Staaten (zeigt das Beispiel für TabA) bekam:

 .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' 
       } 
      } 
     }); 

So tab ‚s-Controller ist die Mutter von tab.tabAList und tab.tabAShow.

tabList enthält eine Funktion wie:

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

Wie diese Funktion auszulösen, wenn tabA geklickt wird?
Der schwierige Teil ist, dass TabsCtrl Code ausgeführt wird, bevor verschachtelte TabAList Controller ausgeführt wird.
Ich habe versucht, eine $rootScope.$broadcast('reloadTheItems',...) unter dem on-select Attribut der Registerkarte einzubeziehen.
Aber das Ereignis wird verpasst, da tabAList zum Zeitpunkt des Sendens des Ereignisses noch nicht ausgeführt wurde.

Hat jemand es erlebt und hat eine schöne Lösung? Ich wiederhole, das Ziel ist: "Laden Sie eine bestimmte zwischengespeicherte Ansicht auf Registerkarte klicken Sie auf".

Antwort

27

Sie sollten auf das Ereignis $ionicView.enter für die Ansicht für TabA hören.

Dann tut dies aus den $scope:

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

... oder so ähnlich ...

+0

Genau das, was ich habe gerade tut :) Vielen Dank! Ist "states.fromCache" spezifisch für Ionic? – Mik378

+1

Keine Notwendigkeit für das $ rootScope. '$ scope' ist genug seit Kind;) – Mik378

+0

Ok, gut. Wir werden immer klüger :-) –