Using Firebase's JavaScript API in Emberfire?

[Bryan Veloso]

Been a heavy user of Emberfire for some time, but mostly "standard" usage of the add-on (i.e., the "blog post" model). I'm attempting to display metrics in a component/route that are updated via a bot, to take advantage of Firebase's "live-updating" feature.

For reference, the component would look roughly like this:

[name of metric (all, today, etc.)                              ]

[most-used emoticon id: no. of times used | second most-used ...]

However, I can't find any resources regarding either jumping into the Javascript API within Ember CLI or accessing nested, non-sequential data like the below in Ember Data.

"metrics" : {

  "{channel}" : {

    "emotes" : {

      "all" : {

        "62328" : 1 // "id of the emoticon: count"

      },

      "daily" : {

        "20160216" : {

          "62328" : 1

        }

      },

      "monthly" : {

        "201602" : {

          "62328" : 1

        }

      }

    }

  }

}

While I'm sure Ember Data is not made for this use case, is there any way I can access the JavaScript API? Also, if there's a way I can structure the above to more easily take advantage of Emberfire's features, I'd greatly appreciate it.

Cheers,

Bryan

[Tim Stirrat]

Hi Bryan,

For direct access to the Firebase JS API, you can access the root Firebase reference through the 'firebase' service. You could use the route's model hook to create a raw ember object that is updated live like so:

export default Ember.Route.extend({
  ref: Ember.inject.service('firebase'),

  model() {
    let ref = this.get('ref');
    let metrics = Ember.Object.create();

    ref.child('path/to/metrics').on('value', (snapshot) => {
      metrics.setProperties(snapshot.val());
    });

    return metrics;
    // Because we are returning the metrics synchronously, they will be empty at first.

    // --- OR ---

    // You could, wait for the first set of values to come back before resolving a promise:
    let valueReceived = false;
    return new Ember.RSVP.Promise((resolve, reject) => {
      ref.child('path/to/metrics').on('value', (snapshot) => {
        metrics.setProperties(snapshot.val());
        if (!valueReceived) {
          valueReceived = true;
          resolve(metrics);
        }
      });
    });
  },

  // Remember to remove the listener
  actions: {
    willTransition() {
      this.get('ref').child('path/to/metrics').off('value');
    }
  }
});

This would get you pretty far. You probably want to dig down into specific metrics, rather than listen at the root level. Otherwise you'll get lots of unnecessary property change notifications.

Hope that points you in an useful direction!

-Tim

[Bryan Veloso]

Hey Tim,

Thanks for the assist! The example works like a charm. I’m having trouble trying to pass all 3 metrics (via Ember.RSVP.hash) to the template (so I can access them via, `model.all`, `model.daily`, etc.). Any thoughts on that?

Cheers,

Bryan

--
You received this message because you are subscribed to a topic in the Google Groups "Firebase + EmberJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/firebase-ember/f1AsXzNm6mo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-embe...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.