mardi 20 décembre 2016

Emberjs belongsTo is null

I'm trying to build a "love" feature and I need to detect whether the user has already loved a book to show a different icon:

screenshot

From the above screenshot, if a user has already "loved" a book, then the heart will be filled in as shown.

I have a computed property called hasLoved which looks like this:

hasLoved: Ember.computed('model', function() {
  let book = this.get('model');
  let userID = this.get('apiManager.currentUser.id');
  // let loves = book.get('loves').filterBy('sender.id', userID);
  let loves = book.get('loves');
  console.log('loves count = ', loves.get('length'));

  for(var i = 0; i < loves.get('length'); i++) {
    let love = loves.objectAt(i);
    console.log('love book = ', love.get('book.id'));
    console.log('love sender = ', love.get('sender.id'));
  }

  return loves.get('length') > 0;
}),

The issue is my book's list of loves doesn't have the sender set for some odd reason.

If you look at the console log in the above screenshot, it says "love sender = undefined".

Even though my Ember is pulling in the data:

{
    "data": {
        "id": "31",
        "type": "loves",
        "attributes": {
            "book": {
                "id": 16,
                "title": "Three Little Pigs",
                "adult_content": false,
                "author_id": 2,
                "created_at": "2016-12-10T09:47:25.103Z",
                "updated_at": "2016-12-10T09:47:25.103Z",
                "published": true,
                "cover": {
                    "url": "http://localhost:3000/uploads/book/cover/16/three_little_pigs.jpg"
                },
                "blurb": "The Three Little Pigs is a fable/fairy tale featuring anthropomorphic pigs who build three houses of different materials. A big bad wolf blows down the first two pigs' houses, made of straw and sticks respectively, but is unable to destroy the third pig's house, made of bricks."
            },
            "sender": {
                "id": 21,
                "first_name": null,
                "last_name": null,
                "username": null,
                "email": "chewedon+tycus@gmail.com",
                "role_id": 3,
                "created_at": "2016-12-15T09:33:07.123Z",
                "updated_at": "2016-12-15T09:33:37.757Z",
                "photo": {
                    "url": null
                }
            }
        },
        "relationships": {
            "book": {
                "data": {
                    "id": "16",
                    "type": "books"
                }
            },
            "sender": {
                "data": {
                    "id": "21",
                    "type": "users"
                }
            }
        }
    }
}

My models are defined as follows:

Love

import DS from 'ember-data';

export default DS.Model.extend({
  book: DS.belongsTo('book', { inverse: 'loves' }),
  sender: DS.belongsTo('user', { inverse: 'loves' })
});

Book

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr(),
  blurb: DS.attr(),
  adultContent: DS.attr('boolean', { defaultValue: false }),
  published: DS.attr('boolean', { defaultValue: false }),
  cover: DS.attr(),
  attachment: DS.attr('file'),
  chapters: DS.hasMany('chapter', { inverse: 'book' }),
  author: DS.belongsTo('user', { inverse: 'books' }),
  loves: DS.hasMany('love', { inverse: 'book' }),
  favourites: DS.hasMany('favourite'),
  comments: DS.hasMany('comment')
});

User

import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  username: DS.attr(),
  email: DS.attr(),
  photo: DS.attr(),
  books: DS.hasMany('book', { inverse: 'author' }),
  loves: DS.hasMany('love', { inverse: 'sender' }),

  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  })
});




Aucun commentaire:

Enregistrer un commentaire