Understanding Ember-Data, DS.Store, and DS.RESTAdapter


#1

TLDR: Data is not showing in Ember Inspector. Not sure if it is an operator headspace timing error related to my understanding of ember-data and DS.Store or configuration related.

I’m new to the Ember environment and I’m working on a small project to learn Ember. I’m using:

Ember App Kit

  • ember 1.2.0
  • ember-data 1.0.0-rc3 ( I think, bower says I’m on 1.0.0-beta.3, but DEBUG below shows different )
  • Handlebars 1.1.2
  • JQuery 1.9.1

Debug prints:

"DEBUG: -------------------------------"
"DEBUG: Ember      : 1.2.0"
"DEBUG: Ember Data : 1.0.0-beta.2"
"DEBUG: Handlebars : 1.1.2"
"DEBUG: jQuery     : 1.9.1"
"DEBUG: -------------------------------"

I’ve defined a Store, Adapter, and Serializer:

Store.js

import ApplicationAdapter from 'appkit/adapters/application';
export default DS.Store.Extend({
  adapter: ApplicationAdapter
});

/adapters/application.js

export default DS.RESTAdapter.extend({
  namespace: 'api';
});

/serializers/application.js

export default DS.RESTSerializer.extend({
  primaryKey: '_id'
});

Data Model and Route are defined:

/models/post.js

export default DS.Model.extend({
  name: DS.attr('string'),
  created: DS.attr('date')
});

/routes/posts.js

export default Ember.Route.extend({
  model: function() {
           return this.store.find('mission');
  }
});

I have a simple template that renders the fields in the data. It’s making a call to a properly formed RESTApi (returns JSON array of all Posts). The request is made and the data is rendered. I see the posts in my app when I navigate to http://host/#/posts .

My question is: Using the RESTAdapter, are the records stored within the client and should I be able to see these records via Ember Inspector (or DOM)? It is my understanding of DS.Store that data is requested from the store, and if not available there, pulled from the server and pushed into the Store. Is this a correct understanding?

From http://emberjs.com/api/data/classes/DS.Store.html

The store contains all of the data for records loaded from the server. It is also responsible for creating instances of DS.Model that wrap the individual data for a record, so that they can be bound to in your Handlebars templates.

Apologies for the length, but any explanation would increase my knowledge and possibly serve to help others trying to learn Ember / Ember-Data. Thoughts?

PS: I very well could be way off course. Any course correction (including “lol ID 10T errors”) would be appreciated. :smile:


#2

That has had me scratching my head too… It’s due to a problem in the version of ember-data in bower.

It thinks it is 1.0.0-rc3 but in the code it claims to be 1.0.0-beta.2.

I think the code is beta 3 but they forgot to bump the version number before tagging (see https://github.com/emberjs/data/blob/v1.0.0-beta.3/VERSION )

I think that you should be able to but it doesn’t work for me either (same setup). I suspect that the Ember Inspector breaks with the resolver from EAK but I haven’t investigated fully…


#3

You’re right on the money there I think.

Glad to know I’m not crazy. You got me pointed in the right direction and I’ve found this issue with a little digging. Haven’t applied it yet, but will play around tomorrow and see. Thanks!


#4

Figured I’d post my solution here for all…

Patch the adapter (/adapters/debug_adapter.js)

    export default DS.DebugAdapter.reopen({
  getModelTypes: function() {
    var self = this;
    return Ember.keys(require._eak_seen).filter(function(key) {
      return !!key.match(/^appkit\/models\//) && self.detect(require(key).default);
    }).map(function(key){
        var type = require(key).default, typeKey = key.match(/^appkit\/models\/(.*)/)[1];
        type.toString = function() { return typeKey; };
        return type;
      });
  }
});

Put this in your default adapter (/adapters/default.js)

import DebugAdapter from 'helios/adapters/debug_adapter';

and apply resolver patch here.


#5

Thanks - that worked for me…

Only difference was that I added the line:

import DebugAdapter from 'appkit/adapters/debug_adapter';

Into /adapters/application.js and changed the path (from helios to appkit)