CODEWITHSUNDEEP
ember.jsember-data
xph
xph

Reputation: 752

Ember-Data: Accessing a list of sideloaded resources?

I have some JSON that has this structure in the /documents path (the IDs are UUIDs):

{
   "tags": [
      {
         "id": "a33fc396-2428-11e3-8eeb-0800270f33f4",
         "name": "test"
      }
      <more tags not shown>
   ],
   "documents": [
      {
         "id": "c41460fa-2427-11e3-8702-0800270f33f4",
         "name": "file.txt",
         "tag_ids": [
            "a33fc396-2428-11e3-8eeb-0800270f33f4"
         ]
      }
      <more documents not shown>
   ]
}

We see that the Tag resource is sideloaded. I'm using ember-data to load the JSON using these routes:

App.Router.reopen
  location: 'history'
  rootURL: '/'

App.Router.map ->
  @resource 'documents', ->

App.DocumentsRoute = Ember.Route.extend
  model: ->
    @get('store').findAll('document')

and models:

App.Document = DS.Model.extend
  name: DS.attr('string')
  tags: DS.hasMany('tag')

App.Tag = DS.Model.extend
  name: DS.attr('string')

This works fine; I can access all of the documents through a handlebars {{#each}} block inside my templates, and I can verify that I can access all tags belonging to a given individual document.

However, I would also like to have access to the list of all tags, without going into each document, in the same template. It shouldn't be hard, because it's there in the JSON, as a sideloaded resource, right? Except I can't figure out how to do it. I've typed all sorts of things into the console to see if it's in one of the attributes within the controller, and I haven't found anything promising. I'm guessing I need to load it and set it to something in my controller, but I don't know how to write it. What do I need to add to my code in order to be able to write something like this?

{{#each tags}}
  Name: {{name}} <--- should print "test"
{{/each}}

Any thoughts are appreciated!

Upvotes: 3

Views: 1165

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

Because you already loaded all tags, and you don't want to send another request to /tags. You can use store.all('tags'), to get the already loaded tags:

App.DocumentsRoute = Ember.Route.extend({
    model: function() {
        var store = this.store;
        return store.findAll('document').then(function(documents) {
            // return an object with documents and tags, to be able to use both in the template
            return {
                documents: documents,
                tags: store.all('tag') // to access all tags loaded in the payload we can just use store.all, so no additional request will be sent
            }
        });        
    }
});

And in your template:

{{#each documents}}
  {{#each tags}}
    Tags of that document
  {{/each}}
{{/each}}

{{#each tags}}
  All tags available
{{/each}}

You can see this in action in that fiddle http://jsfiddle.net/marciojunior/v4aZj/

Observation

In your payload you have tag_ids this just work out of the box with ActiveModelAdapter if you are using RESTAdapter you need to change to tags.

Upvotes: 4

Related Questions