Azure mobile services and Ember.js

Question

Hello!

I learning Ember.js as Web-Client Windows Azure Mobile Services from this tutorial.

When I write:

Tothevoidjs.ApplicationRoute = Ember.Route.extend({
    // admittedly, this should be in IndexRoute and not in the
    // top level ApplicationRoute; we're in transition... :-)
    model: function(params) {
        return Tothevoidjs.Secret.findAll();
    }
});

I get this error:

Uncaught TypeError: Object function () {
    if (!wasApplied) {
        Class.proto(); // prepare prototype...
    }
    o_defineProperty(this, GUID_KEY, undefinedDescriptor);
    o_defineProperty(this, '_super', undefinedDescriptor);
    var m = meta(this), proto = m.proto;
    m.proto = this;
    if (initMixins) {
        // capture locally so we can clear the closed over variable
        var mixins = initMixins;
        initMixins = null;
        this.reopen.apply(this, mixins);
    }
    if (initProperties) {
        // capture locally so we can clear the closed over variable
        var props = initProperties;
        initProperties = null;

        var concatenatedProperties = this.concatenatedProperties;

        for (var i = 0, l = props.length; i < l; i++) {
            var properties = props[i];

            Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));

            for (var keyName in properties) {
                if (!properties.hasOwnProperty(keyName)) { continue; }

                var value = properties[keyName],
                IS_BINDING = Ember.IS_BINDING;

                if (IS_BINDING.test(keyName)) {
                    var bindings = m.bindings;
                    if (!bindings) {
                        bindings = m.bindings = {};
                    } else if (!m.hasOwnProperty('bindings')) {
                        bindings = m.bindings = o_create(m.bindings);
                    }
                    bindings[keyName] = value;
                }

                var desc = m.descs[keyName];

                Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty));
                Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));
                Ember.assert("`actions` must be provided at extend time, not at create time, when Ember.ActionHandler is used (i.e. views, controllers & routes).", !((keyName === 'actions') && Ember.ActionHandler.detect(this)));

                if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
                    var baseValue = this[keyName];

                    if (baseValue) {
                        if ('function' === typeof baseValue.concat) {
                            value = baseValue.concat(value);
                        } else {
                            value = Ember.makeArray(baseValue).concat(value);
                        }
                    } else {
                        value = Ember.makeArray(value);
                    }
                }

                if (desc) {
                    desc.set(this, keyName, value);
                } else {
                    if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
                        this.setUnknownProperty(keyName, value);
                    } else if (MANDATORY_SETTER) {
                        Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
                    } else {
                        this[keyName] = value;
                    }
                }
            }
        }
    }
    finishPartial(this, m);
    this.init.apply(this, arguments);
    m.proto = proto;
    finishChains(this);
    sendEvent(this, "init");
} has no method 'findAll' 

My app.js:

var Tothevoidjs = window.Tothevoidjs = Ember.Application.create();

var client = new WindowsAzure.MobileServiceClient(
    "link",
    "key"
);

Tothevoidjs.WAMAdapter = Ember.Object.extend({
    table: null,
    init: function() {
        this.table = this.get('table');
    },

    find: function(record, id) {
        var query = this.table.where({
            id: id
        });
        return query.read().then(function(data) {
            Ember.run(record, record.load, data);
        });
    },

    findAll: function(klass, records) {
        var _self = this;

        return _self.table.read().then(function(data) {
            Ember.run(records, records.load, klass, data);
        });
    },

    findQuery: function(klass, records, params) {
        var query = this.table.where(params);
        return query.read().then(function(data) {
            Ember.run(records, records.load, klass, data);
        });
    },

    createRecord: function(record) {
        return this.table.insert(record.toJSON()).then(function(data) {
            Ember.run(function() {
                record.load(data.id, data);
                record.didCreateRecord();
            });
        });
    }
});

/* Order and include as you please. */
require('scripts/controllers/*');
require('scripts/store');
require('scripts/models/*');
require('scripts/routes/*');
require('scripts/views/*');
require('scripts/router');

My model file:

var attribute = DS.attr;

Tothevoidjs.Secret = DS.Model.extend({
    id: attribute('number'),
    body: attribute('string')
});

var client = new WindowsAzure.MobileServiceClient(
    "link",
    "key"
);

Tothevoidjs.Secret.adapter = Tothevoidjs.WAMAdapter.create({
    table: client.getTable('secret')
});

And router:

Tothevoidjs.ApplicationRoute = Ember.Route.extend({
    // admittedly, this should be in IndexRoute and not in the
    // top level ApplicationRoute; we're in transition... :-)
    model: function(params) {
        return Tothevoidjs.Secret.findAll();
    }
});

I do not understand what I did wrong. :(

Please tell me how to avoid this error or what I should read to understand it.

If you need to know version of Ember.js - it's from yeoman generator - 1.0.0

P.S. I'm newbie in web-dev.

Answer 1

Your tutorial is using the ember-model libray. But your current code use ember-data version 1.0.0.beta.x. Both are data libraries for ember, have similar api, but are different.

I recommend you to use the ember-model libray, so you will be able to finish the tutorial.

So, import the ember-model script, the source is here, make sure it comes after the ember.js script, and change your model definition to use ember-model:

var attribute = Ember.attr;

Tothevoidjs.Secret = Ember.Model.extend({
    id: attribute('number'),
    body: attribute('string')
});

I hope it helps