CODEWITHSUNDEEP
javascriptajaxasynchronousember.js
user2517182
user2517182

Reputation: 1299

Emberjs something like ajax request return in Helper

Through much looking and trying, I believe there is no way to return a value from an ajax request in an Emberjs help. (I hope I am wrong.) I believe the reason is the whole ansyc callback thing.

So this is my dilemma;

I have a parent model A that has children of model B. I would like to display the parent and the children together with some extra information. The extra information is coming from an api call that is using some of model B's information. I am not saving this extra information on model B, but I would like to display it. So basically, I have something like this:

{{#each modelb in modela.modelbs}}
...
{{/each}}

I would love to be able to do something like:

{{#each modelb in modela.modelbs}}
  {{get-info modelb}}
{{/each}}

And it return the information that I am able to get from the api call.

I tried using a helper like I said before. I tried putting some logic in the controller, but I can not isolate individual child models to create a computed property. (plus I am not sure if a computerd property would help me, I think it needs a return statement, which puts me back in the same issue as a helper, and I do not think I can create a computed property on the child relationship.) And while I have the extra information I need from the api call, I have no way to associate it with my child model B.

I figure I am not thinking about this problem in the 'ember way'. Hopefully, there is a better way to go about this.

Any help would be greatly appreciated.

Upvotes: 1

Views: 159

Answers (3)

user2517182
user2517182

Reputation: 1299

Here is what I ended up with.

In my route I write:

export default Ember.Route.extend({
  //model is already loaded from parent route.
  setupController: function(controller, model){
    var modela = model; //just for clarity with the whole modela/modelb thing.
    modela.get('modelbs').forEach(function(modelb){
      $.ajax({
        //some ajax call using modelb's information.
      }).then(function(data){
        //extraInformation is not a model definted property on modelb, but I just added extraInformation as an index to modelb.
        modelb['extraInformation'] = data;
        controller.set('model', modela);
      });
    });
  }
});

Then in my template I write:

{{#each modelb in modela.modelbs}}
  {{modelb.extraInformation}}
{{/each}}

Hope this helps someone.

Upvotes: 1

datchung
datchung

Reputation: 4622

You can get modelb's info in modela's afterModel hook. Example:

App.ModelaRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('modela', params.id);
  },
  afterModel: function(modela) {
    // Note: afterModel is called after modela is loaded

    // Iterate through modelbs
    modela.get('modelbs').foreach(function(modelb) {
      // Get current modelb's extra information by ajax. Note that this may result in *many* ajax requests - may be undesirable
      ajaxRequestForModelbInfo.done(function(response) {
        // Assign extra information to modelb's extraInformation property
        modelb.set('extraInformation', response);
      });
    });
  }
});

In the hbs template file:

{{#each modelb in modela.modelbs}}
  {{modelb.extraInformation}}
{{/each}}

Upvotes: 0

Jake Rowsell
Jake Rowsell

Reputation: 466

What you could do, since you have the data, is when you make the call for a modelA or ModelB, attach an id of somesorts as a parameter to the call function, and return that with the call's callback. With the callback, you can call a function that will find the correct model to attach the data to?

for example:

var objs = [
    {id:1, info: "hi", extraInfo: ""},
    {id:2, info: "bye", extraInfo: ""}
];

for(var i = 0; i < objs.length; i++){
    getRelatedInfo("extraInfo", objs[i].id);
}

function getRelatedInfo(someParam, 1){
    // call
    // on success
    attachInfoToObj(result, 1);
}
function attachInfoToObj(data, id){
    for(var i = 0; i < objs.length; i++){
        if(objs[i].id === id){
           objs[i].extraInfo = data;
        }
    }
}

Upvotes: 0

Related Questions