CODEWITHSUNDEEP
ember.jshandlebars.jsember-data
odinp123
odinp123

Reputation: 35

Handlebars component rendering but not populated with json data

I am new to ember and I am trying to create a navigation component in my ember.js app.

I have previously created a component the exact same way that renders my blog posts from json data provided by an API. Basically the code you see here is the exact same but the keyword post have been substituted with the keyword page.

The problem is that the handlebars component is being rendered but page.title.rendered is not 'rendered'. Even when I try to console.log(payload) in my serializer, I get no console output. It is as if they are not recognized.

json sample from api

[
   {
      "id":139,
      "title":{
         "rendered":"test"
      }
   }
]

adapters/page.js

export default Eudora.extend({

    pathForType() {
        return 'pages';
    }
});

models/page.js

import Model from 'ember-data/model';
import DS from 'ember-data';

const { 
    attr,
    //belongsTo 
} = DS;

export default Model.extend({

    title: attr()

});

routes/pages.js

import Ember from 'ember';

const {
    Route,
    set
} = Ember;

export default Route.extend({

    model() {

        return this.store.findAll('page');
    },

    setupController(controller, model) {
        set(controller, 'pages', model);
    }
});

serializers/page.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

    normalizeResponse( store, primaryModelClass, payload, id, requestType) {

        payload = { pages: payload };

        return this._super( store, primaryModelClass, payload, id, requestType );

    }
});

templates/components/global-navigation.hbs

{{#each pages as |page|}}
    <li>
        <a href="#">{{page.title.rendered}}</a>
    </li>          
{{/each}}

templates/application.hbs

{{global-navigation pages=pages}}

Upvotes: 0

Views: 173

Answers (2)

odinp123
odinp123

Reputation: 35

Thanks to @kumkanillam for helping me finding the answer. As written in the comments my problem is:

...You are including global-navigation in application route but you are loading model in pages route...

Therefor I had to expand my routes/application.js to include both posts and pages. The code bellow illustrates how I did that:

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {
        return Ember.RSVP.hash({

            posts: this.store.findAll('post'),
            pages: this.store.findAll('page')
        });

    },

    setupController(controller, model) {
        Ember.set(controller, 'posts', model.posts);
        Ember.set(controller, 'pages', model.pages);
    }
});

Upvotes: 0

Ember Freak
Ember Freak

Reputation: 12872

There is no content property in page model. correct code would be

<a href="#">{{page.title.rendered}}</a>

I guess in adapters/page.js file, Eudora is extending DS.RESTAdapter.

Pages route model hook is returning page model but you are trying to include it in application.hbs. so move {{global-navigation pages=pages}} to routes/pages.hbs. and access URL '/pages.

I created sample EMBER-TWIDDLE for you. which will display the result for both application and pages routes.

Upvotes: 1

Related Questions