model assigned by controller not reachable from component

Question

Trying to access an model assigned by route's setupController from my component. But only thing my console.log() logs is a empty object with 3 other ember related object in it, seems un resolved but Ember Inspector says all my Promises are fulfilled. And a {{#each event in events}} i have in my main.hbs works just fine..

full-calendar.js:

import Ember from "ember";

    export default Ember.Component.extend({
      attributeBindings: ['id'],
        id: 'calendar',
        setEvents:function (){
          console.log(this.get("theEvents"));
        }.observes("theEvents"),
        _initializeCalendar: function() {
          var self = this;
          $("#calendar").fullCalendar({
            lang: 'de',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            weekends: false,
            dayClick: function(date) {
              self.sendAction("dayClick",date);
            },
          });
        }.on('didInsertElement')
    });

main.hbs:

{{full-calendar theEvents=events dayClick="dayClick"}}

main.js

import Ember from "ember";

export default Ember.Route.extend({
  setupController:function(controller){
    controller.set('events', this.store.find('event'));
  }
});

jmurphyau jmurphyau · Accepted Answer · 2015-04-16T22:48:22

I would recommend using the model hook in your route.

What Ember does is when it encounters the model hook and a promise is returned, it waits until the promise is fulfilled before continuing onto the setupController hook. What you're doing is providing a promise that is not quire resolved yet - so at the time your component is created and the didInsertElement is executed the promise is not yet resolved.

import Ember from "ember";

export default Ember.Route.extend({
  model: function() {
    return this.store.find('event');
  },
  setupController:function(controller, model) {
    controller.set('events', model);
  }
});

You could also setup an observeron the content and/or isFulfilled properties of the promise and do some work there. They get updated when the promise is resolved.

import Ember from "ember";

export default Ember.Component.extend({

  ...

  setEvents:function (){
    console.log(this.get("theEvents"));
  }.observes("theEvents.content", "theEvents.isFulfulled")

  ...

});

model assigned by controller not reachable from component

1 Answers