Ember.js Get Model in View

Question

I recently started using Ember.js with ASP.NET Web API. i had a hard time getting the model to load from the server. But now that i have it, i want to get the model from the store in the view. Currently i'm developing a Calendar application. here is the logic,

    App.IndexRoute = Ember.Route.extend({
    //setupController: function (controller) {
    //    // Set the IndexController's `title`
    //    this.controllerFor('application').set('model', App.application.options);
    //}
    model: function () {
        return this.store.findAll('eventList');
    },

    setupController: function (controller, model) {
        this.controllerFor('index');
       // controller.set('model', App.Events.findAll());
    }
});

Controller:

    App.IndexController = Ember.ArrayController.extend({
    sortProperties: ['eventId'],
    sortAscending: false,
    //events: Ember.computed.alias('model')
});

Model

    App.EventList = DS.Model.extend({
    eventId: DS.attr('string'),
    title: DS.attr('string'),
    start: DS.attr('string'),
    end: DS.attr('string'),
    allDay: DS.attr('string')
});

App.EventListSerializer = DS.WebAPISerializer.extend({
    primaryKey: 'eventId',
});

finally the View

    /// <reference path="../../@JSense.js" />
App.IndexView = Ember.View.extend({
    didInsertElement: function () {

       var events= this.get('controller').get('store');

        //the view has been completely inserted into the dom
        //  $('#calendar').fullCalendar(this.get('controller.model'));
        $('#calendar').fullCalendar({
            events: events
        });

Now i'm stuck at getting the model inside the view. Because once the didInsertElement is fired, i want to initialize the calendar plugin with the model i recieve from the Store.

var events= this.get('controller').get('store'); doesnt work.

But it does get me this:

var events= this.get('controller').get('store');

As you can see, my model is already in there. So how do i get it out to the view? I'm really stuck, thats why i ended up asking the question. Please help...:)

Answer 1

Ember have a default setupController where the controller.model is setup, so if you override it you need to do:

setupController: function (controller, model) {
    // setup the model
    controller.set('model', model);       
    // setup other things
}

Also, when you get the model using this.get('controller.model') an array like object is returned, called DS.RecordArray and that array have instances of DS.Model, that models isn't a plain javascript object, so if your $('#calendar').fullCalendar({ events: events }); expect a plain js object, you need to use model.toJSON() in each item of the record array.

This is the updated code:

App.IndexRoute = Ember.Route.extend({    
    model: function () {
        return this.store.findAll('eventList');
    },
    setupController: function (controller, model) {
        controller.set('model', model);       
    }
});

App.IndexView = Ember.View.extend({
    didInsertElement: function () {
        var events = this.get('controller.model').map(function(record) {
            return record.toJSON({ includeId: true });
        });
        $('#calendar').fullCalendar({
            events: events
        });
    }
});

I hope it helps