Models are not serialized with Ember.js and WebApiAdapter

Question

I'm trying to use the Ember.js MVC4 Spa Template with my own Models, but I'm not getting this to work.

For now, the serverside code is is working. The result to the browser is correct. But Ember-Data, or the custom WebApi - Serializer, is not able to prepare the Data.

I have two Models: Patient:

App.Patient = DS.Model.extend();
App.Patient.reopen({
    patientId: DS.attr('number'),
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    aufenthalte: DS.hasMany('aufenthalt'), //, { async: true }
    fullName: function () {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName'),
});

App.PatientSerializer = DS.WebAPISerializer.extend({
    primaryKey: 'patientId',

    // ember-data-1.0.0-beta2 does not handle embedded data like they once did in 0.13, so we've to update individually if present
    // once embedded is implemented in future release, we'll move this back to WebAPISerializer.
    // see https://github.com/emberjs/data/blob/master/TRANSITION.md for details
    extractArray: function (store, primaryType, payload) {
        var primaryTypeName = primaryType.typeKey;

        var typeName = primaryTypeName,
            type = store.modelFor(typeName);

        var data = {};
        data[typeName] = payload;
        data.aufenthalte = [];

        var normalizedArray = payload.map(function (hash) {
            hash.aufenthalte.map(function (aufenthalt) {
                data.aufenthalte.push(aufenthalt);
            });
            hash.aufenthalte = hash.aufenthalte.mapProperty('aufenthaltId');
            return hash;
        }, this);

        payload = data;
        return this._super.apply(this, arguments);
    },

    normalizeHash: {
        patient: function (hash) {
            hash.patientId = hash.id;
            return hash;
        }
    }
});

Aufenthalt:

App.Aufenthalt = DS.Model.extend({
    aufenthaltId: DS.attr('number'),
    name: DS.attr('string'),
    patientId: DS.attr('number'),
    patient: DS.belongsTo('patient'),
});

App.AufenthaltSerializer = DS.WebAPISerializer.extend({
    primaryKey: 'aufenthaltId',
    normalizeHash: {
        aufenthalte: function (hash) {
            hash.aufenthaltId = hash.id;
            return hash;
        },
    }
});

When I get a List of "Patients" from my Controller, the Datamodels are filled correctly (I can check it in the Chrome Ember plugin.) When I hit a Action with the Patient Id, I get the error: "Error while loading route: TypeError: Cannot set property 'store' of undefined"

Thank You!

xinqiu xinqiu · Accepted Answer · 2014-02-19T16:59:12

Did you added the proper router in app/routes folder, controller in app/controllers folder, and corresponding views and templates? Feel free to psot a link to your sample solution so I can download and have a look.

=== Update 2/22/2014 === I fixed the code. You should be able to download the modified solution from https://www.dropbox.com/s/4j3vbczqr4nx68m/EmberVSTemplateModified.zip. You should do a windiff on the two directories to see the changes. I need to change a few places to make it work for your scenario, including:

patient.js, make it directly extend from RESTSerialzer, and add extractSingle implementation.
change template of patsucheautocomplete.hbs
added patient\index.hbs . You should be able to remove patient.hbs file
paitentview.js (may not be necessary as it's all default)
modified controllers\htmlhelperextensions.cs, to make it work correctly for sub folder templates in debug mode.

Models are not serialized with Ember.js and WebApiAdapter

1 Answers