CODEWITHSUNDEEP
ember.jsember-data
Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

setting controller content from parent route using ajax in ember-data

I have nested models defined like :

AS.ExerciseRun = DS.Model.extend({
    'name' : DS.attr('string'),
    'exercise' : DS.belongsTo('exercise')
});

AS.Exercise = DS.Model.extend({
    'name'          : DS.attr('string'),
    'engagement'    : DS.belongsTo('engagement')
});

AS.Engagement = DS.Model.extend({
    'name'          : DS.attr('string')
});

and I need to use "ExerciseRun" model in one of my array controller named "AnalyticsRunsIndex". I added it in the needs property of the arrayController. I am kinda stuck now because I am not sure how to load data into my ExerciseRunController via AnalyticsRunsIndexRoute. My route code is:

AS.AnalyticsRunsIndexRoute = Ember.Route.extend({
    exerciseRunId: null,
    model: function () {
        .....

    },
    setupController: function (controller, model) {
        this._super(controller, model);
        controller.set('exerciseRunId', this.get('exerciseRunId'));
        this.controllerFor('analyticsTemplates').set('model', controller.get('store').find('analyticsTemplate'));


                    //TRIED AND FAILED!!!
                    //this returns a rejected promise  with error TypeError: payload[prop].map is not a function
        //this.controllerFor('exerciseRun').set('model', controller.get('store').find('exerciseRun', {'id': this.get('exerciseRunId')}));


        //controller.get('store').find('exerciseRun', {'id': this.get('exerciseRunId')}).then(function(data){
        //  this.controllerFor('exerciseRun').set('content',data);
        //});

        //controller.get('store').find('exerciseRun', {'id': this.get('exerciseRunId')}).then(function(data){
        //    controller.get('store').pushPayload('exerciseRun', data);
        //    controller.set('exerciseRun',data);
        //});


        //set exerciseRun details to the arrayController from any one record
        /*
        var store = controller.get('store');
        $.ajax({
            type: "GET",
            url: AS.baseURL + "exerciseRuns",
            data: {"id": this.get('exerciseRunId')},
            success: $.proxy(function (data) {
                //controller.set('exerciseRunData', data);
            }, this),
            dataType: "JSON"
        });
        */


    }
});

How can I get the this data to the proper controller? I tried plain simply setting property to ArrayController's instance but that didn't work either. Any help will be much appreciated. thanks

Upvotes: 0

Views: 858

Answers (1)

Jeremy Green
Jeremy Green

Reputation: 8574

I think in your setupController hook you should be able to do something like this:

// Get the controller outside of the promise.
// Inside the promise 'this' points to something different.
var exerciseRunController = this.controllerFor('exerciseRun');
controller.get('store').find('exerciseRun', {'id': this.get('exerciseRunId')}).then(function(data){
  exerciseRunController.set('content',data);
});

Upvotes: 1

Related Questions