Access model attributes from another model with a belongsTo relationship Ember.js

Question

I have three models that have relationships with one another. The relationships are as follows:

    App.Lodge = DS.Model.extend({
        name: DS.attr('string'),
        address: DS.attr('string'),
        website: DS.attr('string'),
        phone: DS.attr('string'),
        uniqueDescription: DS.attr('string'),
        basicDescription: DS.attr('string'),
        yearOpened: DS.attr('string'),
        propertySize: DS.attr('string'),
        propertyType: DS.attr('string'),
        languages: DS.attr('string'),
        owner: DS.attr('string'),
        uniqueQualifier1: DS.attr('string'),
        uniqueQualifier2: DS.attr('string'),
        uniqueQualifier3: DS.attr('string'),
        uniqueQualifier4: DS.attr('string'),
        lowDayPrice: DS.attr('string'),
        highDayPrice: DS.attr('string'),
        favoriteBoolean: DS.attr('boolean')
    });
    App.Favorite = DS.Model.extend({
        name: DS.belongsTo('lodge'),
        notes: DS.attr('string'),
        address: DS.belongsTo('lodge'),
        group: DS.belongsTo('group'),
        photo: DS.attr('string'),
    });
App.Group = DS.Model.extend({
    name: DS.attr('string'),
    favorites: DS.hasMany('favorite', {async:true})
});

I'm trying to access the name attribute in my Favorite model, from the Lodge template. The template is:

<script type="text/x-handlebars" data-template-name="group">
      <div class="modal fade" id="groupModal">
        <div class="modal-dialog groupModal">
          <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title tertiaryHeading">{{name}}</h4>
            </div>

            <div class="modal-body">
              <div class="groupFavoriteContainer" {{bind-attr data-groupID=id}}>
      <div class="favoriteControlLinks">
        <a class="actionLink favoritesControl"><span class="glyphicon glyphicon-share"></span> Share this Group</a><a class="actionLink favoritesControl"><span class="glyphicon glyphicon-globe"></span> Show this Group on a Map</a><a class="actionLink favoritesControl back backToGroup"><span class="glyphicon glyphicon-arrow-left"></span> Back to My Group</a>
      </div>
        {{#each favorite in favorites}}
              <div class="favoriteContainer">
                <div class="favoritesImage">
                  <span class="favoritesLodgeName"><h3 class="tertiaryHeading">{{favorite.name}}</h3><p class="favoritesAddress">{{favorite.address}}</p><span>
                </div>
                <a class="actionLink favoriteControl" {{action removeFavorite item}} {{bind-attr data-favoriteid=id}}><span class="glyphicon glyphicon-trash"></span> Remove</a><a class="actionLink favoriteControl"><span class="glyphicon glyphicon-share"></span> Share</a><a class="actionLink favoriteControl"><span class="glyphicon glyphicon-envelope"></span> Contact</a>
                <div class="notes">
                 {{favorite.notes}}
                </div>
              </div>
          {{/each}}
      </div>
            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
      </script>

When I do {{favorite.name}} it prints out: <App.Lodge:ember366:1> . Same with {{favorite.address}}

How can I access these attributes?

Answer 1

In your Favorite model, you have name: DS.belongsTo('lodge') , this say to ember-data that a name property is a instance of lodge . I think that you want lodge: DS.belongsTo('lodge') . And the address: DS.belongsTo('lodge') isn't necessary. Because you can access the address using lodge.address .

Your updated model is the following:

App.Favorite = DS.Model.extend({
    lodge: DS.belongsTo('lodge'),
    notes: DS.attr('string'),
    group: DS.belongsTo('group'),
    photo: DS.attr('string')
});

Using this in your template you will able to do {{favorite.lodge.name}} and {{favorite.lodge.address}}.