CODEWITHSUNDEEP
ember.js
Chad
Chad

Reputation: 18396

Access Parent Models In Ember

So I want to store all of my API keys in a config file in my backend so I don't have them scattered all over the place. So I thought I would be a able to create a Model on the frontend to do a GET on /config and then I would be returned a config object with any API keys I would need. So I'm basically trying to access a model from the ApplicationRoute. To be clear, the request happens right now but I have no idea how to access the data from the index template. I've tried things {{App.Config.apiKey}}, {{apiKey}}, trying to set @get.controllerFor('application').get('model') in the index controller and see if I could look at values, none have worked. I'm using Ember 1.0.0 .4pre. Thanks

So I have something like this:

App = Ember.Application.create
   rootElement: '#app'

# Models
App.Store = DS.Store.extend
  revision: 11

App.User = DS.Model.extend
  firstName: DS.attr 'string'
  lastName: DS.attr 'string'
  accountType: DS.attr 'string'
  email: DS.attr 'string'
  _id: DS.attr 'string'
  password: DS.attr 'string'
  fullName: (->
    "#{@get('firstName')} #{@get('lastName')}"
  ).property('firstName', 'lastName')

App.Config = DS.Model.extend
  secret: DS.attr 'string'
  apikey: DS.attr 'string'

# Controller
# This is has validations for a form in it but I don't think its relivent
App.IndexController = Ember.ObjectController.extend()

# Routes
App.ApplicationRoute = Ember.Route.extend
  model: ->
    App.Config.find()

App.IndexRoute = Ember.Route.extend
  model: ->
    App.User.createRecord()

DS.RESTAdapter.configure "plurals", {
  config: "config"
}

App.Router.map ->
  @resource 'index'

And my templates look something like this:

<!--- index.html --->

<html>
  <head></head>

  <body>
    <div id="app"></div>
  </body>

</html> 

<!--- application.hbs --->
<div class="container">
  {{outlet}}
</div>

<--- index.hbs --->

<div>
  {{apiKey}} <!-- This is a value from the Config Model -->
  {{firstName}} <!-- This is a value from the User Model -->
</div>

Upvotes: 1

Views: 1690

Answers (1)

ken
ken

Reputation: 3745

Either define explicitly your ApplicationController as an ObjectController

App.ApplicationController = Ember.ObjectController.extend()

then in your ApplicationRoute set the content of the controller to the config object

App.ApplicationRoute = Ember.Route.extend
  setupController: (controller, model) ->
    this._super(controller,model);
    controller.set('content',App.Config.find(1));

Or, set your config in your index controller such as 

   App.IndexRoute = Ember.Route.extend({
     setupController: function(controller,model) {
       this._super(controller,model);
       controller.set('config',App.Config.find(1));
     }
    })

and then in your template 

<div>
  {{config.apiKey}} <!-- This is a value from the Config Model -->
  {{config.firstName}} <!-- This is a value from the User Model -->
</div>

See a working jsfiddle using the first approach

You can learn about the different type of controller supported by ember here

Upvotes: 2

Related Questions