EmberJS: Populate common views from server

Question

I'm beginner using EmberJS and I'm trying to play around with it. I'm working with Ember AppKit.

I have a page, localhost:8000/#/home. In my global application.hbs, I have multiple views: header, navigation, footer, and an {{outlet}} in the middle to load the current page.

application.hbs:

{{render 'header'}}
{{render 'navigation'}}
{{outlet}}
{{render 'footer'}}

I found the way to call the server to populate my current page home.hbs with the model, route and adapter.

routes/home.js:

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

adapters/home.js:

export default DS.RESTAdapter.extend({
    host: 'http://localhost:8000/api/home'
});

models/home.js

var attr = DS.attr,

export default DS.Model.extend({
   //My model
});

(The above is just an example)

But now I'm looking for a way to populate the content of my common views from the server as well. They are not pages, so they don't need a route. I don't want to access localhost:8000/#/header

Although my content is available on the API with localhost:8000/api/content/header Do you have any idea of the approach I should follow to do something like that? I was thinking to make a call directly inside the controller using $.getJSON but I'm not sure that's the best way to do...

Thanks

Unknown Unknown · Accepted Answer · 2014-05-02T14:18:35

One approach would be to load the content into the header controller etc. in the home route's setupController hook. I suppose you could also load the content in the HeaderController#init hook.

EmberJS: Populate common views from server

1 Answers