Each helper doesn't display firebase data

1

app/template/post.hbs:

<div>
  {{input type="text" value=newTitle class="form-control" placeholder="Enter title" autofocus="autofocus"}}
  {{input type="text" value=newBody class="form-control" placeholder="Enter text" autofocus="autofocus"}}

  <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3">
    <button class="btn btn-primary btn-lg btn-block" {{action 'saveBlogPost'}}>Submit</button>
  </div>
</div>

<div>
  {{#each post in model}}
    <div>
      <div>{{post.title}}</div>
      <div>{{post.body}}</div>
    </div>
  {{/each}}
</div>

app/models/post.js:

import DS from 'ember-data';

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

app/routes/post.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    //tried without without .then and without reload: true. no luck.
    return this.store.findAll('post', {reload: true}).then( function(result) {
      return result;
    });
  }
});

app/controllers/post.js:

import Ember from 'ember';

export default Ember.Controller.extend({
  newTitle: '',
  newBody: '',
  actions: {
    saveBlogPost() {
      const newPost = this.store.createRecord('post', {
        title: this.get('newTitle'),
        body: this.get('newBody')
      });
      newPost.save();
    }
  }
});

In ember inspector, there are 8 post model entries in firebase. However, when I go to http://localhost:4200/posts, only the top divider appears and not the bottom one (with #each helper). What am I doing wrong? I can actually store data with the text fields and button on the top divider.

C:\project-path>ember -v
version: 2.4.2
node: 4.4.0
os: win32 ia32
2

Have you seen the new syntax for {{#each}} template helpers in Ember 2.0+?:

{{#each model as |post|}}
  . . . 
{{/each}}

You can debug this kind of thing by putting a {{model}} in your template and see if it’s even available. It should read something like [Object Object]. You can also throw this in your template and see if it prints out the right number of 'hi’s to make sure you have access to the posts:

{{#each model as |post|}}
hi
{{/each}}