Ember.js Get Model in View

asp.net, ember.js, javascript, javascript-framework

Solution

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

Problem

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...:)

Original source