Ember Inspector 5-Data
Published on Apr 18, 2015
What can the Data tab in Ember Inspector tell you? Lots and lots... if you're using Ember Data.
The Ember Inspector data tab is a powerful way to view and experiment with all the information that you've stored in Ember Data models.
Listing your Data
Here on the left we have a list of all the types of Ember data models that we've created, so everything that extends DS.Model is here. Then the number beside it shows how many records have been loaded by the client. This particular app is not very well optimized for large amounts, so we've loaded over 2,000 records of the type 'attack'. In a typical app you would want to keep these numbers lower.
When you click on one of these, it then shows you every every record of that type. It will show you the ID as well as other attributes, although you should note that it doesn't show you every attribute right in this view. There is a way to get to that later. Up top we have new, modified, and clean tabs. What that means is if you just create a new record then it will show up here. We don't have any. If you modify a record it will show up here. If it's synced to the server it will show up in clean. Currently everything is clean.
We can click on one of these. It will bring up the Inspector. Notice that there are indeed more fields than are just shown here. Then we can change one of these. We'll change caves to caverns. Notice that it changes here. This is now caverns. This record is also blue. That's a sign that it's modified. As you can see, it shows up under the modified filter but not under the clean filter.
Object Inspecting your Data
Now let's look at the object inspector. Back in episode 17 we spent the whole episode exploring what you could get out of the object inspector. However, in the Data tab when you're exploring an Ember Data model then there are a few extra things that you have to think about.
Attributes are the Ember attributes, the ones that you define using DS.attr(). Then you have your belongsTo and hasMany tabs attributes right there. It's convenient that they're separated out.
You have the Ember Data flags which help determine the lifecycle, and also DS.Model has stuff to help determine the lifecycle as well. Owned properties, honestly I'm not sure exactly how those are useful to you, but they're there.
Then subclass of DS.Model includes everything that's not defined under DS.attr(), DS.hasMany, or DS.belongsTo. Typically this is a lot of computed properties, although I have the item sorting hard-coded, and that shows up here as well.
Then way down here you've got stuff in Ember core object which everyone has. We'll have an episode on concatenated properties sometime soon.
That is the data tab on Ember Inspector. I hope that was useful to you guys. If there's something specific that you'd like me to cover, tweet at me at @jeffreybiles and I'll see what I can do. Thanks and I'll see you guys next week.