EmberJS View programmatically using a not loaded model

Question

I have a model:

App.Checkin = DS.Model.extend({
  latitude: DS.attr('string'),
  longitude: DS.attr('string'),
  time: DS.attr('number')
});

And a route that loads the collection of checkin models (making a request with ember-data) by

model: function() {      
  return this.store.find('checkin');
}

And then in the template for the route I have

{{view App.MapView}}

And I need to access the model programmatically so that I can iterate over each item in the model to add a pin to the map.

Inside my view I have

didInsertElement: function() {
   var data = this.get("context.content");
}

and data is

Class {type: function, store: Class, isLoaded: true, isUpdating: true, toString: function…}

In the network window, the request to the server hasn't completed by that point, so it obviously wouldn't have data to provide. (Even if it did, I don't know how to query an object like that, none of the expected methods worked (get/forEach))

I believe that I need to observe the model being changed, and have tried

updatePins: function() {
  debugger;
}.observes('context.content')

inside of the view. I have tried binding to all sorts of things, but reRender has never been called. I've tried the recommendations on Emberjs view binding for Google maps markers by trying to bind to controller.content, context, App.Checkin, etc.

How do I go about getting the data from the model once it has loaded...inside of the view?

intuitivepixel intuitivepixel · Accepted Answer · 2013-10-05T08:50:08

Until the model does not resolve what you get is a promise for that model, obviously the promise does not contain the data just yet but when the request comes back from the server. You could check in your template if the model has data, by observing the model.length property for example using an if helper, the if helper block will re-evaluate when the length property changes this beeing when it has received data.

For example, you could try something like this:

...
{{#if model.length}}
  {{view App.MapView}}
{{/if}}
...

This will ensure that your App.MapView is then rendered when your model has data and therefore you will have also access to the data in the view's didInsertElement hook as you'd expect.

Update

Your reRender hook is named slightly wrong, it should be rerender

rerender: function() {
  debugger;
}.observes('context.content')

Hope it helps.

EmberJS View programmatically using a not loaded model

1 Answers

Update