What is the correct way to load in object in emberjs?

Question

Let me first describe my usecase.

As a user, you should be able to create a job, while creating this job, you need to specify a field of work. These fields should be loaded dynamically from my REST API. Being quite new to EmberJS i don't really now how i should load in these fields, as i am working in the JobNewController & route.

Should i somehow load them in my route? I have been trying something like this, but i can't get it to work, also i not quite sure what i am doing anyway.

MyApp.JobsRoute = Ember.Route.extend
  setupController: (controller) ->
    controller.set 'serviceFields', MyApp.ServiceField.find()

Using this template

<p>Creating a new job</p>
<div class="ui input">

  Select a service field
  {{#each serviceFields }}
    {{name}}   sdf
  {{/each}}

</div>

I also tried doing this in the controller like so.

MyApp.JobsNewController = Ember.ObjectController.extend serviceFields: MyApp.ServiceField.find()

But this yields and error

Assertion failed: Your application does not have a 'Store' property defined. Attempts to call 'find' on model classes will fail. Please provide one as with 'YourAppName.Store = DS.Store.extend()' 

I guess the controller code is ran before the Store is initialized.

How should i handle this?

Answer 1

The proper way to get models is to use the store and find that model type. (pardon my coffeescript, I used a converter to do it for me)

MyApp.JobsRoute = Ember.Route.extend(setupController: (controller, model) ->

  # return does nothing here
  # this._super(controller,model); would do the default
  controller.set "serviceFields", []
  promise = @get("store").find("serviceField")
  promise.then (records) ->
    controller.set "serviceFields", records

)

This is the more common approach, btw

MyApp.JobsRoute = Ember.Route.extend(model: ->
  @get("store").find "serviceField"
)