Ember BelongsTo within two models issue

Question

Good day all,

Models:

lesson

title: DS.attr('string'),
guild: DS.belongsTo('guild')

guild

title: DS.attr('string'),
color: DS.attr('string')

I create structure for full-calendar in lessons controller

    events: function(){
       var lessons = this.get('model');
       var events = [];
       lessons.map(function(lesson){
           events.push({
               'title' : lesson.get('title'),
               'start' : lesson.get('start'),
               'end'   : lesson.get('end'),
               'color' : lesson.get('guild.color'), // return undefined
               'lesson': lesson
           });
       });

       return events;
   }.property('model')

or

events: function(){
       var lessons = this.get('model');
       var events = [];
       lessons.map(function(lesson){
           events.push({
               'title' : lesson.get('title'),
               'start' : lesson.get('start'),
               'end'   : lesson.get('end'),
               'color' : lesson.get('color'), // return undefined
               'lesson': lesson
           });
       });

       return events;
   }.property('model')

But have trouble for resolve lesson.guild.color relation I try add new property in model that compute color from guild, like this:

title: DS.attr('string'),
guild: DS.belongsTo('guild'),
color: function(){ 
   return this.get('guild.color');
}.property('guild.color')

thx, engma. But this work only for Handlebars, because it is resolve all promises.

If any know how to get properly color from guild entity, would be great..

Heh, i try this:

events: function(){
    var lessons = this.get('model');
    var events = [];
    var guildPromisses = lessons.getEach('guild');
    return Ember.RSVP.all(guildPromisses).then(function(guilds){
        return lessons.map(function(lesson){
            events.push({
                'title': lesson.get('title'),
                'start': lesson.get('start'),
                'end': lesson.get('end'),
                'color': lesson.get('guild.color')
            });
        });
    }).then(function(result){
        return events;
    });

}.property('model'),

This work, but i think it return Promise :)

what is this syntax Ember.computed('guild', function()....).property('guild') ? I think it's either one of them, but not both at once — engma, Dec 29 '15 at 09:26
If i right think, first 'guild' this is use for preload calculation and second after 'guild' has been changed.. I also try another variants, Ember.computed(function(){}).property('guild'), function(){}.property('guild') — iTux, Dec 29 '15 at 11:49
Issue in guild not resolved before and array contained promise doesn't resolve it to variable. if i right, lesson.get('guild').get('color') should be -> lesson.get('guild').then(function(guild){ return guild.get('color'); })... that construction return promise, and promise should be resolved before i add record to list — iTux, Dec 29 '15 at 11:51
Another way, return color from backend, but why need belongsTo, if i can't fetch property from relation ? — iTux, Dec 29 '15 at 11:55
Well I get properties from relations all the time but I use this syntax: guildColor:function() { return this.get('guild.color); }.proeprty('guild.color') — engma, Dec 29 '15 at 12:34
Ok, try bit later when go home :) On example seems to work. Thanks — iTux, Dec 29 '15 at 13:25
As i see calculation in route should fail, because model is not resolve relations and we haven't yet guild :) But in model, we work with already resolved properties, and that is why this code work :) Ember.computed('guild.color', function(){ return this.get('guild.color'); }) also work :) — iTux, Dec 29 '15 at 13:35
import Ember from 'ember'; export default Ember.Controller.extend({ events: Ember.computed(function(){ var model = this.get('model'); var events = []; model.map(function(lesson){ console.log(lesson.get('guild.color')); events.push({ 'title': lesson.get('title'), // return value 'start': lesson.get('start'), 'end': lesson.get('end'), 'color': lesson.get('color') // return undefined }); }) return events; }).property('model') }); — iTux, Dec 29 '15 at 16:08
I think so strange if handlebars resolve relations and not model. When i want precalculate something, when i need it done, Controller, ok... This is not work for relation, because relations is not resolved yet (??) — iTux, Dec 29 '15 at 16:43
Engma, big thanks but this variant resolve when i use handlebars, and not help when i want prepare some data for full-calendar in controller. Relation again not resolved yet... I think, this is normal behavior for Ember-data, and not normal for me :) And already think return this color calculated from backend, but relation with guild present me more information neither only color... ;((((( Ember, WAT?! 3 day for what ? — iTux, Dec 29 '15 at 16:49
did you try to add that computed property in your controller/component or in model only? The suggetion from engma should defenitely work, it works for me all the time (with loaded and not yet loaded relationships). Can you post the controller/component where you want to access that property? — Jeff, Dec 29 '15 at 23:31

score 0 · Accepted Answer · edited May 23 '17 at 11:44

events: function(){
    var _self = this;
    var lessons = _self.get('model');
    var guildPromisses = lessons.getEach('guild');
    var result =  Ember.RSVP.all(guildPromisses).then(function(guilds){
        var events = [];
        lessons.map(function(lesson){
            events.push({
                'title': lesson.get('title'),
                'start': lesson.get('start'),
                'end': lesson.get('end'),
                'color': lesson.get('guild.color')
            });
        });
        _self.set('events', events);
    });
}.property('model'),

Thats all, thank for Engma, and this topic: How to return a promise composed of nested models in EmberJS with EmberData?

Ember BelongsTo within two models issue

Models:

1 Answers1