Why is Firebase data not displaying properly in my Ember CLI generated output?

Question

I've successfully setup Ember CLI and Firebase and I'm attempting to bring some basic data into my templates. My 'title' and 'subtitle' data are apparent in the Ember Inspector, as well as my Firebase project dashboard. However, {{foo.title}} and {{foo.subtitle}} are coming back empty and undefined in the browser. Why is that? Here's my code:

application.js (adapter)

    import DS from 'ember-data';

    export default DS.FirebaseAdapter.extend({
      firebase: new window.Firebase('https://<firebase-database-name>.firebaseio.com/')
    });

foo.js (model)

    import DS from 'ember-data';

    export default DS.Model.extend({
      title:    DS.attr('string'),
      subtitle: DS.attr('string')
    });

index.js (controller)

    import Ember from 'ember';

    export default Ember.Controller.extend({
      model: function() {
        var titles = this.store.createRecord('foo', {
          title: 'Title',
          subtitle: 'Subtitle'
        });
        titles.save();
      }
    });

index.js (route)

    import Ember from 'ember';

    export default Ember.Route.extend({
      model: function() {
        return this.store.findAll('foo');
      }
    });

application.hbs (template)

    <h2 id='title'>{{foo.title}}</h2>

    {{outlet}}

index.hbs (template)

    <h1>{{foo.title}}</h1>
    <h3>{{foo.subtitle}}</h3>

The title and subtitle fail to display in the templates.

The Ember Inspector View Tree tab shows 'index' with 'DS.RecordArray:ember368' for the model.

The Ember Inspector Data tab shows Model Type of 'foo' with # Records of 1. When I click on that record, it displays the Firebase ID, title, and subtitle values. When I inspect my Firebase data url, I see the following structure:

    firebase-database-name
      |— foos
           |— JU1Ay8emCNNZBeqYoda
                |— subtitle: "Subtitle"
                    |— title: "Title"

Seems like everything is correct, but the templates do not display the data values. Thanks for any help.

You URL points to web/data, but the collection is at data/foos/... — Kato
Thanks @Kato, but that's not the issue. I've updated my Firebase data url schematic above, to clarify that 'web' is the parent of data, to reflect the endpoint for the Firebase adapter. — jacefarm

jacefarm jacefarm · Accepted Answer · 2014-08-21T05:04:35

The answer to this question centers on properly retrieving and exposing Ember Data, and not so much to do with Firebase or Ember CLI. There are multiple issues with the code above…

The foo.js code represents a simple model, and is written correctly.

The index.js route is implemented correctly. It is retrieving and returning the ‘foo’ model from the Ember Data store as an array, which, via EmberFire and the Firebase adapter, is ultimately being pulled from the Firebase database. However, this is part 1 of 3 problems. If you want this data displayed once across the application, dispense with the index.js route, and just define an application.js route, like this:

    import Ember from 'ember';

    export default Ember.Route.extend({

      model: function() {
        return this.store.findAll('foo');
      }
    }

The index.js controller has a number of issues, and is part 2 of 3 problems. Firstly, controllers do not have a ‘model’ method, they only have a ‘model’ property (Ember Routes are the ones that employ a ‘model’ method, and can also set the ‘model’ property of a controller via a Route’s ‘setupController’ method). Secondly, instead of Ember.Controller, it needs to extend Ember.ObjectController for a singular data instance, or, Ember.ArrayController for an array of data, which is the controller needed here, since ‘this.store.findAll(“foo”)’ in the index.js route is going to return an array of objects. Controllers are not used to save or retrieve data from a server, but they can be used to decorate a model. Given that the route is returning the model, the controller, in this simple data exercise, is not even necessary.

The application.hbs handlebars template is part 3 of 3 problems. It is not setup to properly display the model that is being provided to it via the route. It’s necessary to employ the {{#each}} helper, to loop over the data array that is being returned via the route’s model method. Try this:

    {{!-- looping over the 'foo' model returned via the route --}}
    {{#each foo in model}}
      <h2>Application Title = <span style="color: blue;">{{foo.title}}</span></h2>
      <h4>Application Tagline = <span style="color: blue;">{{foo.tagline}}</span></h4>
    {{/each}}

    {{outlet}}

The index.hbs handlebars template is not necessary. The application.hbs template is sufficient to display the data of interest.

This is a very basic exercise, but illustrates fundamental aspects of using Ember Data properly.

Why is Firebase data not displaying properly in my Ember CLI generated output?

1 Answers