CODEWITHSUNDEEP
ember.jsember-dataember-cli
jumper rbk
jumper rbk

Reputation: 416

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

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}}

enter image description here

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

enter image description here

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!

enter image description here

Upvotes: 0

Views: 369

Answers (3)

Aathi
Aathi

Reputation: 3224

<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

Upvotes: 0

jumper rbk
jumper rbk

Reputation: 416

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

Upvotes: 0

LanNguyen
LanNguyen

Reputation: 334

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

Upvotes: 0

Related Questions