Ember Unbound & Belongsto

Question

I have no problem doing {{unbound title}} or

{{#each file}}
{{unbound filename}}
{{/each}}

on a model.

BUT, all belongsto object in ember is really problematic for me. None of ways below work

{{unbound location.address}}

and

{{with location}}
{{unbound address}}
{{/with}}

both of these two result in empty output

Answer 1

At the time your model is being processed, any belongsTo relationships are not resolved yet. Since you're not binding, it can't retroactively update once that data is available either. I found this workaround yesterday, helping my solve my (similar) issues with belongsTo: https://github.com/emberjs/data/issues/1405

For existing records, you need to do something like the following in your route:

// your-route beforeModel: function() {   var self = this;   return
Em.RSVP.hash({
    firstBelongsTo: this.store.find('first-belongs-to'),
    secondBelongsTo: this.store.find('second-belongs-to')
    }).then(function (models) {
      self.controllerFor('this-route').setProperties(models);   });

And in your controller, be sure to declare the properties before setting them as Ember tries to throw then into content when they don't exist:

// your-controller App.MyController = Ember.Controller.extend({  
firstBelongsTo: null,   secondBelongsTo: null });

By returning a promise in the beforeModel hook, you are telling the route to resolve the promise BEFORE loading the model, which also mean before any rendering occurs. This gives your application time to load the data up front before binding it to the select boxes.