mercredi 18 octobre 2017

How do you access nested objects in Emberjs?

I'm trying to access a nested object from an ember model. The models look like this: Content:

export default DS.Model.extend({
  title: DS.attr('string'),
  text: DS.attr('string'),
  createdBy: DS.attr('string'),
  status: DS.attr('string'),
  contentType: DS.attr('string'),
  author: DS.belongsTo('author', { embedded: true }),
  campaign: DS.belongsTo('campaign', { embedded: true })
});

Author:

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

Campaign:

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

I'm calling a list of objects from a Rails REST API. The data looks like this:

 {
  "data": [
    {
      "id": "1",
      "type": "contents",
      "attributes": {
        "title": "The Great Escape",
        "text": "This is the way the world ends!",
        "status": "Draft",
        "content-type": "Blog Post",
        "created-by": "#\\u003cUser:0x007fe4920d8850\\u003e",
        "author": {
          "id": 3,
          "name": "Daniel Duck",
          "created_at": "2017-10-17T21:56:00.105Z",
          "updated_at": "2017-10-17T21:56:00.105Z"
        },
        "campaign": {
          "id": 3,
          "name": "Apple - Fall",
          "created_at": "2017-10-17T21:56:00.093Z",
          "updated_at": "2017-10-17T21:56:00.093Z"
        }
      }
    },
    {
      "id": "2",
      "type": "contents",
      "attributes": {
        "title": "Just a lonely Joe in search of his soul",
        "text": "One day he'll be a real boy.",
        "status": "Final",
        "content-type": "Email",
        "created-by": "#\\u003cUser:0x007fe4920d8850\\u003e",
        "author": {
          "id": 2,
          "name": "Roberta Rock",
          "created_at": "2017-10-17T21:56:00.103Z",
          "updated_at": "2017-10-17T21:56:00.103Z"
        },
        "campaign": {
          "id": 2,
          "name": "Blade Runner 2049",
          "created_at": "2017-10-17T21:56:00.091Z",
          "updated_at": "2017-10-17T21:56:00.091Z"
        }
      }
    },
    {
      "id": "3",
      "type": "contents",
      "attributes": {
        "title": "Love in the time of Silicon Valley",
        "text": "Maybe love IS all we need.",
        "status": "Waiting for Review",
        "content-type": "PR Release",
        "created-by": "#\\u003cUser:0x007fe4920d8850\\u003e",
        "author": {
          "id": 1,
          "name": "James Jackson",
          "created_at": "2017-10-17T21:56:00.101Z",
          "updated_at": "2017-10-17T21:56:00.101Z"
        },
        "campaign": {
          "id": 1,
          "name": "PRP",
          "created_at": "2017-10-17T21:56:00.089Z",
          "updated_at": "2017-10-17T21:56:00.089Z"
        }
      }
    }
  ]
}

I setup the contents route:

export default Route.extend({
    model() {
        return this.get('store').findAll('content', {include: 'author'});
    }
});

I set up the template:

<div class="jumbo">
<h1>Contents</h1>

</div>

    


I set up the listing component like this:


<article class="content">
  <h3></h3>
  <div class="detail owner">
    <span>Author:</span> 
  </div>
  <div class="detail text">
    <span>Text:</span> 
  </div>
  <div class="detail status">
    <span>Status:</span> 
  </div>
  <div class="detail content_type">
    <span>Content Type:</span> 
  </div>
</article>

When I try to list the objects:

Contents

The Great Escape

Author: <DS.PromiseObject:ember389>
Text: This is the way the world ends!
Status: Draft
Content Type: Blog Post
Just a lonely Joe in search of his soul

Author: <DS.PromiseObject:ember392>
Text: One day he'll be a real boy.
Status: Final
Content Type: Email
Love in the time of Silicon Valley

Author: <DS.PromiseObject:ember395>
Text: Maybe love IS all we need.
Status: Waiting for Review
Content Type: PR Release

How do I resolves the Promise and get the author object?




Aucun commentaire:

Enregistrer un commentaire