Search code examples
ember.jsfirebaseemberfire

EmberFire Adding relationship from different model


-------------------------------
Ember      : 1.13.11
Ember Data : 1.13.15
Firebase   : 2.3.2
EmberFire  : 1.6.3
jQuery     : 1.11.3
-------------------------------

I've got two endpoints in my firebase app. /employees and /subjects. In my ember app I want to add subjects to an employee (employees/$id/subjects). The problem is, I don't know how to load all my subjects from /subjects so I can add them to my array.

This is my routes:

Router.map(function() {
  this.route('dashboard');
  this.route('employees', function() {
    this.route('employee', { path: '/:id'});
  });
});

And this is my model

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('employee', params.id);
    }
});

I've tried various things to get this to work, creating a subroute this.route(employee, function(){ this.route('subjects') }, loading a second model in my employee model, none of which has worked. I'm new to ember so I might have gotten some things mixed up. Any helps is appreciated.

EDIT

Employee model

export default DS.Model.extend({
  name: DS.attr('string'),
  position: DS.attr('string'),
  accessoryPosition: DS.attr('string'),
  education: DS.attr('string'),
  experience: DS.attr('string'),
  imgUrl: DS.attr('string'),
  subjects: DS.hasMany('subject', {async: true})
});

Subject Model

export default DS.Model.extend({
  name: DS.attr('string')
});

To maybe describe my intentions a bit better, here is the flow I want:

User selects an employee, employees info is shown along with a list of subjects assigned to that employee. But I also need the full list of subjects available, if I want to assign a new subject to an employee. Hence my question. Hope this makes sense


Solution

  • Okay, then you can do this in your Route:

    export default Ember.Route.extend({
       model(params) {
         return Ember.RSVP.hash({
                employee: this.store.findRecord('employee', params.id), 
                subjects: this.store.findAll('subject')        
         });
      }
    });
    

    then in your template:

    {{#each employee.subjects as |subject|}}
       {{!these are your employee subjects}}
       {{subject.name}}
    {{/each}}
    
    
    
    {{#each subjects as |subject|}}
       {{!these are all your subjects}}
       {{subject.name}}
    {{/each}}