2014-11-25 18 views
9

Tôi hiện đang sử dụng phiên bản "xây dựng ban đêm" mới nhất của Ionic.Ionic/Làm thế nào để làm mới chế độ xem được lưu trong bộ nhớ cache?

Một tin tốt lành với phiên bản này là các khái niệm về cached views:

Bằng quan điểm mặc định được lưu trữ để cải thiện hiệu suất. Khi chế độ xem là được điều hướng khỏi, phần tử của nó nằm trong DOM và phạm vi của nó là bị ngắt kết nối khỏi chu kỳ. Khi điều hướng đến chế độ xem là đã được lưu vào bộ nhớ cache, phạm vi của nó sau đó được kết nối lại và phần tử hiện có còn lại trong DOM sẽ trở thành chế độ xem đang kích hoạt. Điều này cũng cho phép giữ vị trí cuộn của các chế độ xem trước đó.

Thú vị, vì vậy tôi đã thử nó và nó thực sự mượt mà.

Tuy nhiên, tôi đi qua một vấn đề nghiêm trọng UX:

Về cơ bản, ứng dụng của tôi gồm 2 tabs.

  • TabA nhằm mục đích hiển thị các mục tải và danh sách.
  • TabB nhằm mục đích hiển thị các mục khác.

Mỗi người có một điều hướng riêng: liệt kê và hiển thị các mục cụ thể.
Rõ ràng, lần đầu tiên, dữ liệu là mới, nhưng sau đó, kể từ khi được lưu trữ => cũ.

Chế độ xem được lưu trong bộ nhớ cache thực sự được điều chỉnh cho nút "quay lại" từ "hiển thị" thành "danh sách" của một tab cụ thể.
Thật vậy, di chuyển là duy trì và bộ điều khiển không cần phải tải lại => hiệu suất rất tốt.

Tuy nhiên, người dùng muốn gì khi nhấp vào một tab cụ thể là nhận danh sách được làm mới.

Tôi thực sự không thể tìm thấy một cách hiệu quả và đẹp mắt để làm mới chế độ xem được lưu vào bộ nhớ cache cụ thể về phần tử được nhấp.

Tôi đã có những tuyên bố bang (hiển thị các ví dụ cho 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' 
       } 
      } 
     }); 

Vì vậy, điều khiển tab 's là phụ huynh của tab.tabAListtab.tabAShow.

tabList chứa một hàm như:

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

Làm thế nào để kích hoạt chức năng này khi tabA được nhấp?
Phần khó khăn là mã TabsCtrl được chạy ngay trước khi bộ điều khiển lồng nhau TabAList chạy.
Tôi đã cố gắng liên quan đến một số $rootScope.$broadcast('reloadTheItems',...) trong thuộc tính on-select của tab.
Nhưng sự kiện bị bỏ qua vì tabAList chưa chạy tại thời điểm gửi sự kiện.

Có ai đã trải nghiệm nó và có một giải pháp khá hay không? Tôi lặp lại, mục tiêu là: "Tải lại chế độ xem được lưu trong bộ nhớ cache cụ thể trên tab nhấp vào".

Trả lời

27

Bạn nên nghe sự kiện $ionicView.enter cho chế độ xem cho TabA.

Sau đó làm điều này từ $scope:

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

... hoặc một cái gì đó tương tự ...

+0

Chính xác những gì tôi đã chỉ làm :) Cảm ơn! Có phải 'states.fromCache' dành riêng cho Ionic không? – Mik378

+1

Không cần '$ rootScope'. '$ scope' là đủ kể từ khi con;) – Mik378

+0

Ok, tốt. Chúng tôi nhận được khôn ngoan hơn theo giờ :-) –

Các vấn đề liên quan