Skip to content Skip to sidebar Skip to footer

Ember.js Dynamic Model Requests

I am trying to make a request from the store for a model based on the result of a previous model request. Please find the code below: For the route: model(params) { var id = para

Solution 1:

Well, every call to ember-data that returns something that may require a request to the server, like find(), findAll(), query(), save(), and async relationships returns a PromiseObject or a PromiseArray.

It works the same way for objects and arrays, so just lets describe how arrays work.

A PromiseArray is both, a Promise and a ArrayProxy. This is very useful because you can work with it in both ways, depending on your situation.

Because the request to the server may take some time, the resulting ArrayProxy part is often empty, and will be populated with data later. This is very useful because your handlebars template and computed properties will update when the ArrayProxy changes.

The Promise part of the PromiseArray will resolve as soon the data are received from the server, with an actual array, that also may update later when you do further changes on your data.

The ember router however will wait for the promise to be resolved before it loads the route, which allows you to specify a loading substrate.

This is why model.framework is different in setupController. It's not the result of the .find() but the result of the resolved promise. Thats basically what Ember.RSVP.hash does for you.


Generally I recommend you two things.

  1. Don't store a model id on a model, but use a relationship.
  2. Don't call the store in .setupController(). Do all your requests in the .model() hook and use the promise chain to do so.

Maybe take this as a inspiration:

return Ember.RSVP.hash({
  question: this.store.query('question', {orderBy: 'framework', equalTo: id}),
  framework: this.store.find('frameworks', id),
  frameworks: this.store.findAll('frameworks')
}).then(({question, framework, frameworks}) => {
  let includedFramework = framework.get('includedFramework');
  let includedFrameworkModel = this.store.find('frameworks', includedFramework);
  return {question, framework, frameworks, includedFrameworkModel};
});

Solution 2:

var includedFrameworkModel = this.store.find('frameworks', includedFramework);

The store.find() method will return the promise, the object was not resolved when you print in log.

Changed your script to something like this.

this.store.find('frameworks', includedFramework).then(function(includedFrameworkModel) {
    Ember.Logger.info(includedFrameworkModel);
});

Post a Comment for "Ember.js Dynamic Model Requests"