Geofire查询事件未触发

时间:2016-10-28 17:08:28

标签: firebase polymer polymer-1.0 geofire

我正在制作一个Polymer web组件,用于使用Geofire的查询。我在一个单独的应用程序中成功使用它们(使用js),但在测试组件时,查询不会触发任何事件。 Firebase数据库确实包含数据。

以下是相关代码,这是 demo

geofire-query.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="scripts.html">
<link rel="import" href="geofire-elements-behavior.html">

<!--
`geofire-query`
An element for working with GeoFire's [`GeoQuery`](https://github.com/firebase/geofire-js/blob/master/docs/reference.md#geoquery)s.
@polymerBehavior GeofireElementsBehavior
@demo demo/index.html
-->

<dom-module id="geofire-query">
  <template>
    <style>
      :host {
        /*display: block;*/
      }
    </style>
  </template>

  <script>
    Polymer({
      is: 'geofire-query',
      properties: {
        /**
         * The latitude for the query's center.
         */
        lat: Number,
        /**
         * The longitude for the query's center.
         */
        lng: Number,
        /**
         * The radius in kilometers around the query's center.
         */
        radius: Number,
        /**
         * Whether the query is active and listening for GeoQuery events.
         */
        idle: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
//          observer: '_idleChanged'
        },
        /**
         * An array managed by the GeoQuery events.
         * Each element is an object with properties `key, lat, lng, location, distance`.
         */
        resultsArray: {
          type: Array,
          notify: true
        },
        /**
         * An object managed by the GeoQuery events.
         * It is a map of key => {`lat, lng, location, distance`}.
         */
        resultsObject: {
          type: Object,
          notify: true
        }
      },
      observers: [
        '_idleChanged(idle, _query)',
        '_queryChanged(lat, lng, radius)'
      ],
      behaviors: [
         GeofireElementsBehavior
      ],
      _idleChanged: function(idle, query) {
        if (!query) return;
        console.log('we have a query', query.center(), query.radius(), idle, query, 'app=', this.app);
        if (!idle) {
          this.resultsArray = [];
          this.resultsObject = {};
          console.log('setting listeners...');
          this.onKeyEnteredRegistration = query.on('key_entered', function(key, location, distance) {
            console.log('key-entered', key, location, distance);
            this.resultsObject[key] = {
              lat: location[0],
              lng: location[1],
              location: location,
              distance: distance
            };
            var data = {
              key: key,
              lat: location[0],
              lng: location[1],
              location: location,
              distance: distance
            };
            this.resultsArray.push(data);
            this.fire('key-entered', data);
          }.bind(this));
          this.onKeyExitedRegistration = query.on("key_exited", function(key, location, distance) {
            this.resultsObject[key] = null;
            for (var i = 0; i < this.resultsArray.length; i++) {
              if (this.resultsArray[i].key == key) {
                this.resultsArray.splice(i, 1);
                break;
              }
            }
            this.fire('key-exited', {
              key: key,
              lat: location[0],
              lng: location[1],
              location: location,
              distance: distance
            });
          }.bind(this));
          this.onKeyMovedRegistration = query.on("key_moved", function(key, location, distance) {
            this.resultsObject[key] = {
              lat: location[0],
              lng: location[1],
              location: location,
              distance: distance
            };
            var data = {
              key: key,
              lat: location[0],
              lng: location[1],
              location: location,
              distance: distance
            };
            for (var i = 0; i < this.resultsArray.length; i++) {
              if (this.resultsArray[i].key == key) {
                this.resultsArray[i] = data;
                break;
              }
            }
            this.fire('key-moved', data);
          }.bind(this));
          this.onReadyRegistration = query.on("ready", function() {
            console.log('ready');
            this.fire('ready');
          }.bind(this));
        } else {
          query.cancel();
          query = null;
          console.log('set query to null?', this._query === null);
        }
      },
      _queryChanged: function(lat, lng, radius) {
        if ((lat || lat === 0) && (lng || lng === 0) && radius) {
          console.log('querying [', lat, lng, ']', radius, 'km');
          var criteria = {
            center: [lat, lng],
            radius: radius
          };
          if (this._query) {
            this._query.updateCriteria(criteria);
          } else {
            this._query = this._geofire.query(criteria);
          }
        }
      }
      /**
       * Corresponds to the GeoQuery's `key_entered` event. Fires after updating the internal results.
       * @event key-entered
       * @param {key} string The location's identifier.
       * @param {lat} number Latitude.
       * @param {lng} number Longitude.
       * @param {location} array [lat, lng] shorthand.
       * @param {distance} number Distance from the query's center, in kilometers.
       */
      /**
       * Corresponds to the GeoQuery's `key_exited` event. Fires after updating the internal results.
       * @event key-exited
       * @param {key} string The location's identifier.
       * @param {lat} number Latitude.
       * @param {lng} number Longitude.
       * @param {location} array [lat, lng].
       * @param {distance} number Distance from the query's center, in kilometers.
       */
      /**
       * Corresponds to the GeoQuery's `key_moved` event. Fires after updating the internal results.
       * @event key-moved
       * @param {key} string The location's identifier.
       * @param {lat} number Latitude.
       * @param {lng} number Longitude.
       * @param {location} array [lat, lng].
       * @param {distance} number Distance from the query's center, in kilometers.
       */
      /**
       * Corresponds to the GeoQuery's `ready` event. Fired when the initial result set of the query is ready.
       * @event ready
       */
    });
  </script>
</dom-module>

geofire-elements-behavior.html

<script>
/**
 * @polymerBehavior
 */
 GeofireElementsBehavior = {
        properties: {
          /**
           * The Firebase app's name. If not specified, the default Firebase app will be used.
           */
          app: String,
          /**
           * The path to this geofire's data inside the Firebase database.
           */
          path: String
        },
        // observers: [
        //   '_geofireChanged(app, path)'
        // ],
        //
        // _geofireChanged: function(app, path) {
        //   this._geofire = new GeoFire(firebase.app(app).database().ref(path));
        // },
        /**
         * The [GeoFire](https://github.com/firebase/geofire-js/blob/master/docs/reference.md#geofire) instance.
         */
        get _geofire() {
            if (!this.geofireInstance) {
                console.log('init geofire. app=', this.app, 'path=', this.path);
                this.geofireInstance = new GeoFire(firebase.app(this.app).database().ref(this.path));
            }
            return this.geofireInstance;
        }
    };
</script>

1 个答案:

答案 0 :(得分:0)

这是一个愚蠢的规则错误:(

我有

{
  "rules": {
    "geofire1": {
      "$key": {    
        ".read": "true",    
        ".write": "true"
      }
    }
  }
}

但我需要

{
  "rules": {
    "geofire1": {
      ".read": "true",
      ".indexOn": "g",
      "$key": {        
        ".write": "true"
      }
    }
  }
}