從具有歸屬關系Ember.js的另一個模型訪問模型屬性

Question

我有三個相互關聯的模型。 關系如下：

    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})
});

我正在嘗試從Lodge模板訪問我的Favorite模型中的name屬性。 模板是：

<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>

當我執行{{favorite.name}}時，它會打印出來： <App.Lodge:ember366:1> 。 與{{favorite.address}}相同

如何訪問這些屬性？

Answer 1

在您的Favorite模型中，您具有name: DS.belongsTo('lodge') ，這是對ember-data的說法，即name屬性是lodge的實例。 我認為您想要lodge: DS.belongsTo('lodge') 。 address: DS.belongsTo('lodge')是不必要的。 因為您可以使用lodge.address來訪問地址。

您更新的模型如下：

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

在您的模板中使用此模板，您將可以執行{{favorite.lodge.name}}和{{favorite.lodge.address}}。