javascript - EmberJS - 显示捆绑在一起的模型

Question

我希望这是有道理的。我有一个 Ember 应用程序，其中列出了几种类型的旅馆。用户可以“收藏”一个旅馆，也可以创建“组”来将每个收藏夹放入其中。但是，我无法弄清楚如何列出与特定组关联的所有收藏夹。我正在使用DS.hasManyandDS.belongsto将模型绑定在一起，但它不起作用。我的 Ember 代码 App.js：

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.Router.map(function() {
  this.resource('groups', { path: '/groups' });
  this.resource('favorites', {path: '/favorites'});
});

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        showGroups: function() {
            //this.container.lookup('view:groups').append();
          this.transitionTo('groups');
        }
    }
});

App.ApplicationController = Ember.Controller.extend({
});

App.FavoriteController = Ember.ObjectController.extend({
    needs: ['group']
});

App.GroupsController = Ember.Controller.extend({
    newGroupBoolean: false,
    actions: {
        showNewGroupInput: function() {
            switch(this.get('newGroupBoolean')) {
                case false:
                    this.set('newGroupBoolean', true);
                    break;
                case true:
                    this.set('newGroupBoolean', false);
                    break;
            }
        },
        newGroupName: '',
        createNewGroup: function() {
            var groupName = this.get('newGroupName');
            // Create the new Todo model
            var group = this.store.createRecord('group', {
                name: groupName
            });

            this.set('newGroupName', '');

            group.save();
        }

    }
});

App.GroupController = Ember.ObjectController.extend({
    actions: {
        removeGroup: function() {
            var group = this.get('model');
            group.deleteRecord();
            group.save();

        },
        showFavorites: function() {
            this.transitionToRoute('favorites');
        }
    },
    groupId: function() {
        return this.get('id');
    }
})

App.GroupsRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('group');
    }
});

App.FavoritesRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('favorite');
    }
})



App.GroupsView = Ember.View.extend({
    templateName: "groups",
    //classNames: ["modal", "fade"],
    didInsertElement: function() {
        this.$('#groupsModal').modal('show');
        this.$('#groupsModal').on('hidden.bs.modal', $.proxy(this._viewDidHide,this));
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        this.get('controller').transitionToRoute('/');
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

App.FavoritesView = Ember.View.extend({
    templateName: "favorites",
    //classNames: ["modal", "fade"],
    didInsertElement: function() {
        this.$('#favoritesModal').modal('show');
        this.$('#favoritesModal').on('hidden.bs.modal', $.proxy(this._viewDidHide,this));
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        this.get('controller').transitionToRoute('/');
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

App.Group = DS.Model.extend({
    name: DS.attr('string'),
    favorites: DS.hasMany('App.Favorite')
});

App.Group.FIXTURES = [
    {
        id: 1,
        name: 'Family Reunion',
        favorites: []
    },
    {
        id: 2,
        name: 'California Trip',
        favorites: []
    },
    {
        id: 3,
        name: 'Dream Vacations',
        favorites: []
    },
    {
        id: 4,
        name: 'Fun for Kids',
        favorites: []
    },
    {
        id: 5,
        name: 'Awesome Trip!',
        favorites: []
    }
];

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

App.Favorite.FIXTURES = [
    {
        id:1,
        name: 'Clearwater Historic Lodge and Canoe Outfitters',
        notes: 'This is some notes about this favorite',
        address: '774 Clearwater Road, Grand Marais, MN 55604',
        group: 1,
        photo: 'This is a note with some awesome content!',
    },
    {
        id:2,
        name: 'Teton Lodge',
        notes: 'This is some notes about this favorite',
        address: '774 Clearwater Road, Grand Marais, MN 55604',
        group: 1,
        photo: 'This is a note with some awesome content!',
    },
    {
        id:3,
        name: 'Some Awesome Lodge',
        notes: 'This is some notes about this favorite',
        address: '774 Clearwater Road, Grand Marais, MN 55604',
        group: 2,
        photo: 'This is a note with some awesome content!',
    },
    {
        id:4,
        name: 'The Best Lodge Ever',
        notes: 'This is some notes about this favorite',
        address: '774 Clearwater Road, Grand Marais, MN 55604',
        group: 3,
        photo: 'This is a note with some awesome content!',
    }
];

模板：

<script type="text/x-handlebars" data-template-name="application">
    <div class="content">
{{outlet}}
</div>
<script>

<!-- MY GROUPS MODAL -->
    <script type="text/x-handlebars" data-template-name="groups">>
      <div class="modal fade" id="groupsModal">
        <div class="modal-dialog favoritesGroupModal">
          <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">My Favorite Groups</h4>
            </div>

            <div class="modal-body">
              {{#each model}}
                {{render "group" this}}
              {{/each}}
              {{#if newGroupBoolean}}
                <div class="input-group newGroupInput">
                  {{input value=newGroupName class="form-control" type="text" placeholder="Type group name here"}}
                  <span class="input-group-btn">
                    <button class="btn btn-default actionBtn" type="button" {{action createNewGroup}}><span class="glyphicon glyphicon-ok"></span></button>
                  </span>
                </div><!-- /input-group -->
              {{else}}
              &nbsp
              {{/if}}
            </div>    

            <div class="modal-footer">
              <button type="button" class="btn actionBtn groupBtnContainer" {{action showNewGroupInput}}>Create New Group</button>
            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
      </script>
    <!-- MY GROUPS MODAL -->

    <script type="text/x-handlebars" data-template-name="group">
      <div class="groupBtnContainer">
        <button class="btn trashBtn" {{action removeGroup item}}><span class="glyphicon glyphicon-trash"></span></button><button class="btn secondaryBtn groupBtn" {{action showFavorites}}>{{name}}</button><button class="btn secondaryBtn"><span class="glyphicon glyphicon-share"></span></button>
        {{#each favorites}}
          {{name}}
        {{/each}}
      </div>
    </script>

     <!-- MY FAVORITES MODAL -->
    <script type="text/x-handlebars" data-template-name="favorites">>
      <div class="modal fade" id="favoritesModal">
        <div class="modal-dialog favoritesGroupModal">
          <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">My Favorites</h4>
            </div>

            <div class="modal-body">
              {{#each model}}
                {{render "favorite" this}}
              {{/each}}

            </div>    

            <div class="modal-footer">

            </div>

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

      <script type="text/x-handlebars" data-template-name="favorite">
      <div class="groupBtnContainer">
        {{name}}
      </div>
    </script>
    <!-- MY FAVORITES MODAL -->