Ember-data: working with model in controllers/views

Question

I'm having problem to understand how to work with ember-data models in my views and controllers. I'm writing app using emberjs 1.2.0 + ember-data 1.0.0-beta.2. I've writing my own custom RESTAdapter and Serializer for our (crazy) API. Everything seems to work fine -> I can work with model's data in my templates and so on.

I'll try to explain basic functionality of app. For example I have UserModel with collection of Users and than I have a template for list of users and user detail where you can edit profiles and so. Everything is pretty clean there. Then I have another model call Location with last location associated to user. This model I'm using in my template with google maps where I need to use this model (in my mapView) for creating annotations in map. Another example is reportModel with day stats of user's activity. This model I need to to build dc.js charts with those stats. Without ember-data I basically set ajaxRequest in Route's model hook and than I can get data in my controller or view. I'm trying turn this route to using ember-data as rest of app but I don't really know how to get model's data in View or controller when get('model') returns DS.Model's class.

Little bit of code:

App.DashboardRoute = App.AuthenticatedRoute.extend({
    model: function() {
        return this.store.find('daystat');
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

App.DashboardView = Ember.View.extend({
    didInsertElement: function() {

        // load model from controller
        var model = this.get('controller.content');

        console.log(model);
    }
});

console log on Dashboard route:

Class
__ember1391503821834: "ember608"
__ember1391503821834_meta: Meta
_oldWillDestroy: function superWrapper() {
_super: undefined
arrangedContent: (...)
content: (...)
get content: function () {
set content: function (value) {
isLoaded: true
isUpdating: false
store: Class
toString: function () { return ret; }
type: App.Daystat
willDestroy: function superWrapper() {
__proto__: Object

Rest Serializer log before pushing api response to store with data I exactly want to work with in Dashboard View:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, nextObject: function, firstObject: undefined, lastObject: undefined, contains: function,  getEach: function…]

Single object (date) containts someting like:

date: "2014-01-18"
id: 4
orders_count: 0
orders_sum: 0
sales_count: 0
sales_sum: 0
visits_count: 0
__proto__: Object

My question is: how can I work with Ember-Data Models in my views or controllers like I do in my handlebars templates?

Marek Fajkus Marek Fajkus · Accepted Answer · 2014-02-04T12:51:29

Ok, after some time spent googling and testing I'm having basic idea about solution:

First of all this might help anyone who is dealing with similar problem: Ember: How to set controller model for use in select view

In my views I'm dealing with collection so i simply did little log test customizing app code like this:

App.MapController = Ember.ArrayController.extend({
    getLocations: function() {
        var model = this.get('content');

        model.forEach(function(item) {
            console.log(item.get('id'));
        });
    }
});

App.MapView = Ember.ContainerView.extend({

    elementId: 'map-canvas',
    tagName: 'div',

    attributeBindings: ['style'],

    map: null,

    didInsertElement: function() {
        var mapOptions = {
            center: new google.maps.LatLng(49.678293, 15.446777),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(this.$().get(0),mapOptions);
        this.set("map",map);

        // Get controller
        var controller = this.get('controller');

        controller.getLocations();
    }
});

Log return ids:

2 combined-scripts.js:357
3 combined-scripts.js:357
...

So yeah, you can get it by using get method on each property.

Ember-data: working with model in controllers/views

1 Answers