Databases
StackOverflow2013
Postsdbo
POEmberJS - Display models that are tied together
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmberJS - Display models that are tied together
    text
    copied!<p>I hope this makes sense. I have an Ember app, that has lists several types of lodges. A user can "favorite" a lodge, and also create "groups" to put each favorite into. However, I am unable to figure out how to list all the favorites that are associated with a particular group. I'm using the <code>DS.hasMany</code> and <code>DS.belongsto</code> to tie the models together, but it's not working. My Ember code App.js: </p> <pre><code>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!', } ]; </code></pre> <p>Templates:</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt; &lt;div class="content"&gt; {{outlet}} &lt;/div&gt; &lt;script&gt; &lt;!-- MY GROUPS MODAL --&gt; &lt;script type="text/x-handlebars" data-template-name="groups"&gt;&gt; &lt;div class="modal fade" id="groupsModal"&gt; &lt;div class="modal-dialog favoritesGroupModal"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title tertiaryHeading"&gt;My Favorite Groups&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; {{#each model}} {{render "group" this}} {{/each}} {{#if newGroupBoolean}} &lt;div class="input-group newGroupInput"&gt; {{input value=newGroupName class="form-control" type="text" placeholder="Type group name here"}} &lt;span class="input-group-btn"&gt; &lt;button class="btn btn-default actionBtn" type="button" {{action createNewGroup}}&gt;&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;&lt;/button&gt; &lt;/span&gt; &lt;/div&gt;&lt;!-- /input-group --&gt; {{else}} &amp;nbsp {{/if}} &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn actionBtn groupBtnContainer" {{action showNewGroupInput}}&gt;Create New Group&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.modal-content --&gt; &lt;/div&gt;&lt;!-- /.modal-dialog --&gt; &lt;/div&gt;&lt;!-- /.modal --&gt; &lt;/script&gt; &lt;!-- MY GROUPS MODAL --&gt; &lt;script type="text/x-handlebars" data-template-name="group"&gt; &lt;div class="groupBtnContainer"&gt; &lt;button class="btn trashBtn" {{action removeGroup item}}&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class="btn secondaryBtn groupBtn" {{action showFavorites}}&gt;{{name}}&lt;/button&gt;&lt;button class="btn secondaryBtn"&gt;&lt;span class="glyphicon glyphicon-share"&gt;&lt;/span&gt;&lt;/button&gt; {{#each favorites}} {{name}} {{/each}} &lt;/div&gt; &lt;/script&gt; &lt;!-- MY FAVORITES MODAL --&gt; &lt;script type="text/x-handlebars" data-template-name="favorites"&gt;&gt; &lt;div class="modal fade" id="favoritesModal"&gt; &lt;div class="modal-dialog favoritesGroupModal"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title tertiaryHeading"&gt;My Favorites&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; {{#each model}} {{render "favorite" this}} {{/each}} &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.modal-content --&gt; &lt;/div&gt;&lt;!-- /.modal-dialog --&gt; &lt;/div&gt;&lt;!-- /.modal --&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="favorite"&gt; &lt;div class="groupBtnContainer"&gt; {{name}} &lt;/div&gt; &lt;/script&gt; &lt;!-- MY FAVORITES MODAL --&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload