ember.js - ember-cli: ember-data not available on child view

Question

I'm using the latest ember-cli and currently testing it, creating very simple app using ember-data and http-mock for RESTAdapter - ember generate http-mock api-server

Single post get from the API:

http://localhost:4200/api/api-server/posts/1

Result

{"post":
   {
      "id":1,
      "title":"How to write a JavaScript Framework",
      "author":"Tomhuda Katzdale",
      "body":"Lorem ipsum dolor sit amet"
   }
}

Here are all the relevant codes:

Adapters

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
   namespace: 'api/api-server'
});

Model

import DS from 'ember-data';

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

router.js

import Ember from 'ember';

var Router = Ember.Router.extend({
   location: EmbercliDataENV.locationType
});

Router.map(function() {
  this.route('application');
  this.resource('posts', function() {
     this.resource('post', { path: ':post_id' });
  });
});

export default Router;

Routes (posts and post) - view and child view

posts route

import Ember from 'ember';

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

post route

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
     return this.store.find('post', params.post_id);
  }
});

template

posts.hbs

<h2>Posts List</h2>

<ul>
  {{#each}}
    <li>
       {{#link-to 'post' this}}{{title}}{{/link-to}} | {{author}} | {{body}}
    </li>
  {{/each}}
</ul>
{{outlet}}

post hbs

<h2>Single Post</h2>

<p>Post title: {{title}}</p>
<p>Post author: {{author}}</p>
<p>Post body: {{body}}</p>

THE PROBLEM: if you look at the screen-cap below, in the chrome ember debugger, the single post model is hooked to the post route but is not printed in the post.hbs

Using just the ember starter kit, I got no problem at all with the exact same app.

Thank you for any help, cheers

UPDATE

The following is the exact same Ember app coded using the starter kit, host in xampp and using PHP Slim framework for REST Api. Working FINE!

Answer 1

try to fix your data, because post is nested in posts, try this:

{"post":[
   {
      "id":1,
      "title":"How to write a JavaScript Framework",
      "author":"Tomhuda Katzdale",
      "body":"Lorem ipsum dolor sit amet"
   }]
}

check within your posts hbs if the data is visible, then post should work fine

Answer 2

After browsing the Ember.js forum I got the answer there - http://discuss.emberjs.com/t/strange-behavior-w-retrieving-model-from-controller/6155

It seems when using the Ember generate controller command, you end up with Ember.Controller, not Ember.ObjectController or Ember.ArrayController lol.

I edit my post controller from: (generate by the Ember generate controller command)

export default Ember.Controller.extend({
});

to

export default Ember.ObjectController.extend({
});

and now the model is binding :D

Answer 3

<h2>Posts List</h2>

<ul>
  {{#each}}
    <li>
       {{#link-to 'post' post}}{{title}}{{/link-to}} | {{author}} | {{body}}
    </li>
  {{/each}}
</ul>
{{outlet}}

1.instead of 'this' use post, hope this will fix the issue http://emberjs.com/guides/templates/links/#toc_adding-additional-attributes-on-a-link