Ember Data Belongs to and Loading another controller model record

Question

I am trying to make an ember.js app using ember-data where there are basically two tables from from mysql database using laravel 4 restfully. Here one column of the first table is foreign key to the another table's entry. I was browsing through tutorials, where i stumbled upon this function in ember data.

DS.belongsTo

I used this as:

App.Leader = DS.Model.extend({
  name_en: DS.attr('string'),
  name_ne: DS.attr('string'),
  photo: DS.attr('string'),
  education: DS.attr('string'),
  contact: DS.attr('string'),
  address: DS.attr('string'),
  age: DS.attr('string'),
  party: DS.belongsTo('party'),
  history: DS.attr('string')
});

App.Party = DS.Model.extend({
 name: DS.attr('string'),
 logo: DS.attr('string'),
 headquarter: DS.attr('string'),
 president: DS.attr('string'),
 established: DS.attr('string'),
 philosophy: DS.attr('string')
});

Here in Leader model, the party column only contains the id number of Party Model, so what i wanted to achieve is somehow relate these two model, so i can fetch that particular record from party model using the id or integer provided under party of Leader model.

My route code them is like this:

App.LeadersRoute = Ember.Route.extend({
model: function(){
    NProgress.start();
    var data = this.store.find('leader');
    data.then(function(value){
        NProgress.done();
    });
    return data;
}
});

App.LeaderRoute = Ember.Route.extend({
model: function(params){
    NProgress.start();
    var data = this.store.find('leader', params.leaders_id);
    data.then(function(value){
        NProgress.done();
    });
    return data;
}
});

App.PartiesRoute = Ember.Route.extend({
model: function(){
    NProgress.start();
    var data = this.store.find('party');
    data.then(function(value){
        NProgress.done();
    });
    return data;
}
});

App.PartyRoute = Ember.Route.extend({
model: function(params){
    NProgress.start();
    var data = this.store.find('party', params.parties_id);
    data.then(function(value){
        NProgress.done();
    });
    return data;
}
});

What i want to achieve is when i create a new leader record i need a select input which shows the list of all the current party record and select one of them and when user create a leader then under party column it should put an id corresponding to that particular record under party model.

And when user browse through some particular leader record, then it also should fetch the party name from party model using the id provided in party column in leader model.

These are my current controllers:

App.LeadersController = Ember.ArrayController.extend({
isNew: false,
actions: {
    newRecord: function(){
        this.set('isNew', true);
    },
    create: function(){
        //create code
    },
    cancel: function(){
        this.set('isNew', false);
    }
},
});

App.LeaderController = Ember.ObjectController.extend({
isEditing: false,
actions: {
    edit: function(){
        this.set('isEditing', true);
    },

    doneEditing: function(params){
        this.set('isEditing', false);
    },
    delete: function(params){
        //delete code           
    }
}
});

App.PartiesController = Ember.ArrayController.extend({
file_name: null,
isNew: false,
actions: {
    newRecord: function(){
        this.set('isNew', true);
    },
    create: function(){
        //create code
    },
    cancel: function(){
        this.set('isNew', false);
    }
},
});

App.PartyController = Ember.ObjectController.extend({
isEditing: false,
actions: {
    edit: function(){
        this.set('isEditing', true);
    },

    doneEditing: function(params){
        this.set('isEditing', false);
    },
    delete: function(params){
        //delete code
    }
}
});

How do I fetch the record from party model inside the template of Leader?

ashraf ashraf · Accepted Answer · 2014-04-07T16:19:31

I think you can tap into the Ember Data relationships when you're fetching a specific leader, like so (not tested):

    App.LeaderRoute = Ember.Route.extend({
    model: function(params){
        NProgress.start();
        var data = this.store.find('leader', params.leaders_id);
        data.then(function(value){
            NProgress.done();
            return value.get('party');
        });
        return data;
    }
    });

to show a list of all the parties in your leader creation template, I think you can set a property in your LeaderController to all the parties, like so (not tested):

    App.LeaderController = Ember.ObjectController.extend({
    isEditing: false,
    selectedParty: function() {
        return this.model.get('party');
    }.property('model'),
    parties: function()  { return this.store.find('party') },
    actions: {
        edit: function(){
            this.set('isEditing', true);
        },

        doneEditing: function(params){
            this.set('isEditing', false);
        },
        delete: function(params){
            //delete code   
        }
    }
    });

You can then create a Ember.Select view and bind its content to the parties property of the context controller and set its value to the selectedParty computed property.

Also, not sure if its better to place your nprogress calls in the activate and deactivate hooks of the routes?

Ember Data Belongs to and Loading another controller model record

1 Answers