CODEWITHSUNDEEP
javascriptjsonrestember.js
user962206
user962206

Reputation: 16147

EmberJS template is not redering model values

Here is my app/models/post.js (Which is the model)

import DS from 'ember-data';

var attr = DS.attr;

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

Here's the route which is located at the app/routes/post.js

import Ember from 'ember';

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

Here's the template for handling it app/templates/post.hbs

<h1>{{title}}</h1>
<h2>by {{author.name}}</h2>

<hr>
<div class = "body">
{{body}}
</div>

Here is my router.

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

Whenever I access the localhost:4200/post/1 The view renders nothing, however whenever I view the network it retrieves this json data

{"post":{"id":1,"title":"How to win at life","body":"Body","author":1},"authors":[{"id":1,"name":"George","posts":[1,2]}]}

Here's my directory structure

enter image description here

Whenever I run my debugger and hover at the page it shows that I have a model enter image description here

Upvotes: 0

Views: 17

Answers (1)

Daniel
Daniel

Reputation: 18692

You need to use model property in your template:

<h1>{{model.title}}</h1>
<h2>by {{model.author.name}}</h2>

<hr>
<div class = "body">
{{model.body}}
</div>

ObjectController is deprecated now so model properties aren't proxied anymore and you can't use just {{title}} instead of {{model.title}}.

this.resource() is also deprecated now.

Upvotes: 2

Related Questions