0

そこで、GeoFire と AngularFire を使用して ng-repeat アイテム リストを作成しました。リストを更新するためのイオンプルがあります。したがって、ユーザーはそれをプルして、現在の更新された場所を取得し、リストを更新します (GeoFire を呼び出してリストを再入力します)。

$scope.doRefresh = function() {
  if ($scope.doneLoading) {
    $scope.useCurrentLocation().then(function() {
      $scope.userCurrentLocation = {
        lat: geoLocation.getGeolocation().lat,
        lng: geoLocation.getGeolocation().lng
      }

      angular.forEach($scope.tasks, function(child) {
        child.$destroy();
      });

      setupTaskListing();

      $scope.$broadcast('scroll.refreshComplete');
    })
  }
}

function setupTaskListing() {
  console.log("setupTask is being called");
  if ($scope.tasks.length > 0) {
    console.log("task is not empty!");
    $scope.tasks = [];
  }
  if ($scope.query) {
    console.log("$scope.query is not empty:" + $scope.query);
    $scope.query.cancel();
  }
  var radiusInMiles = ($scope.radius) * 1.60934;
  $scope.query = taskService.setGeoQuery($scope.userCurrentLocation.lat, $scope.userCurrentLocation.lng, radiusInMiles); //My service to set Geo Query.
  var geoQueryCallback = $scope.query.on("key_entered", "SEARCH:KEY_ENTERED");
}

$scope.$on("SEARCH:KEY_ENTERED", function(event, key, location, distance) {

  //my service to get a single task. It return a firebase object. So I use $loaded
  var task = taskService.getTask(key);
  task.$loaded().then(function(data) {            
    data.distance = parseInt(distance * 0.621371192);
    data.id = data.$id;
    $scope.tasks.push(data);
  });
});

上記のコードを見ると、かなり簡単です。doRefresh() は setupTaskListing() を呼び出します。そして、キーがイベントの発火に入ったときに、新しいデータを $scope.tasks 配列にプッシュするように geoQueryCallback を設定します。それでうまくいきます。

しかし、この GeoFire 構造の問題は...すべてのタスクがいつ半径に入ったのかわかりません...そのため、ローダーをセットアップして、半径内にデータがない場合にプロンプ​​トを出すことができません。データが入力されていない場合、key_entered イベントは発生しないため、データがあるかどうかはわかりません。データがないか、GeoFire がまだロードされている可能性があります。loader.hide() メソッドを $scope.$on 内に配置すると、実際にデータがないときに起動しません。したがって、私の画面は永遠にロードされます。理想的な UX は、読み込みを停止し、ユーザーに検索範囲を広げるよう促すものです。loader.hide() を $scope.$on の外に置き、$timeout を設定して呼び出します。$timeout が実行される前に、GeoFire がデータをロードするのに時間がかかります。そのため、ユーザーは半径の変更画面を表示し、実際のリストに戻ります。またもや悪いUX。そう... ここで私のオプションは何ですか？GeoFire で使用できるプロミスはありますか?

4

1 に答える 1

3

Geofire は、次の場合に「Query Ready」イベントを発生させます。

現在のすべてのデータがサーバーからロードされ、すべての初期イベントが発生しました。

Geofire ドキュメントのこのセクションを参照してください。

そこからのコードサンプル:

var onReadyRegistration = geoQuery.on("ready", function() {
  console.log("GeoQuery has loaded and fired all other events for initial data");
});
于 2015-10-08T07:17:24.367 に答える