Ember.js Helper that mimics an Ajax request response

Question

Ember.js Helper that mimics an Ajax request response

After extensive exploration and experimentation, it seems that returning a value from an ajax request in Emberjs is quite challenging. (I could be mistaken.) The issue appears to be related to the asynchronous nature of callbacks.

Here lies my predicament;

I have a parent model A with children of model B. My goal is to showcase both the parent and children together, along with additional information obtained through an api call leveraging data from model B. I do not intend to store this extra information on model B, but rather wish to display it. Essentially, the setup resembles this:

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

It would be ideal to achieve something like this:

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

Where the retrieved information from the api call is rendered.

I attempted using a helper as mentioned earlier. I also experimented with controller logic, however, isolating individual child models to create a computed property proved to be problematic. Additionally, I am uncertain if a computed property would address my needs, considering it requires a return statement. This loops me back to the original issue with helpers. Moreover, creating a computed property directly on the child relationship seems unattainable. While I have the necessary extra information from the api call, linking it with my child model B poses a challenge.

It appears that my approach to this problem may not align with the 'ember way'. Hopefully, there exists a more effective method to tackle this.

Any assistance on this matter would be sincerely appreciated.

javascript ajax asynchronous ember.js

Answer 1

Answer №1

This is the solution I came up with.

Within my route, I include the following:

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 defined property on modelb, but I just added extraInformation as an index to modelb.
        modelb['extraInformation'] = data;
        controller.set('model', modela);
      });
    });
  }
});

In the template, I include:

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

I hope this explanation can assist someone experiencing the same issue.

Answer 2

This is the solution I came up with.

Within my route, I include the following:

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 defined property on modelb, but I just added extraInformation as an index to modelb.
        modelb['extraInformation'] = data;
        controller.set('model', modela);
      });
    });
  }
});

In the template, I include:

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

I hope this explanation can assist someone experiencing the same issue.

Answer 3

Answer №2

One way to utilize the existing data is by including an identifier when calling modelA or ModelB functions. This identifier can then be used in the callback function to correctly associate the data with the respective model.

Here's a simplified example:

var objects = [
    {id:1, message: "Hello", additionalInfo: ""},
    {id:2, message: "Goodbye", additionalInfo: ""}
];

for(var i = 0; i < objects.length; i++){
    retrieveAdditionalData("additionalInfo", objects[i].id);
}

function retrieveAdditionalData(parameter, 1){
    // make call
    // on success
    linkDataToObject(result, 1);
}
function linkDataToObject(data, id){
    for(var i = 0; i < objects.length; i++){
        if(objects[i].id === id){
           objects[i].additionalInfo = data;
        }
    }
}

Answer 4

One way to utilize the existing data is by including an identifier when calling modelA or ModelB functions. This identifier can then be used in the callback function to correctly associate the data with the respective model.

Here's a simplified example:

var objects = [
    {id:1, message: "Hello", additionalInfo: ""},
    {id:2, message: "Goodbye", additionalInfo: ""}
];

for(var i = 0; i < objects.length; i++){
    retrieveAdditionalData("additionalInfo", objects[i].id);
}

function retrieveAdditionalData(parameter, 1){
    // make call
    // on success
    linkDataToObject(result, 1);
}
function linkDataToObject(data, id){
    for(var i = 0; i < objects.length; i++){
        if(objects[i].id === id){
           objects[i].additionalInfo = data;
        }
    }
}

Answer 5

Answer №3

To retrieve information about modelb in modela's afterModel hook, you can use the following code as an example:

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

    // Iterate through modelbs
    modela.get('modelbs').foreach(function(modelb) {
      // Retrieve additional information for current modelb via ajax. Keep in mind that multiple ajax requests may be triggered - which could be undesirable
      ajaxRequestForModelbInfo.done(function(response) {
        // Set extra information to modelb's extraInformation property
        modelb.set('extraInformation', response);
      });
    });
  }
});

In the hbs template file:

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

Answer 6

To retrieve information about modelb in modela's afterModel hook, you can use the following code as an example:

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

    // Iterate through modelbs
    modela.get('modelbs').foreach(function(modelb) {
      // Retrieve additional information for current modelb via ajax. Keep in mind that multiple ajax requests may be triggered - which could be undesirable
      ajaxRequestForModelbInfo.done(function(response) {
        // Set extra information to modelb's extraInformation property
        modelb.set('extraInformation', response);
      });
    });
  }
});

In the hbs template file:

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

Ember.js Helper that mimics an Ajax request response

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Loopback API that seamlessly integrates with Ember.js

Breaking auto-update functionality when using the 'dd-slick' jQuery plugin to style chained drop-downs

Submitting a specific group of form inputs using ajax involves selecting the desired elements within the form

Connecting HTML POST to MongoDB using NodeJS

Simplified React conditional rendering made easy

How can we integrate fixed-data-table-2 sorting with an existing redux store?

Submitting a file using Ajax XMLHttpRequest

Do not include the ajax request during the redirection process

Having trouble loading a React component

Converting dynamic content within a div into an interactive link

What is the process for filtering out a particular version of an npm package?

Installing libraries using npm can be done in two ways: using the command `npm install`

Tips for resizing a tooltip using CSS

Verifying the existing user in a personalized Ajax form that is used to update a Woocommerce order

jQuery includes inArray as the final element in an array or object

Retrieve dynamic data for Pivot in Devexpress AngularJS

Codepen fails to function properly after being uploaded to a server

Animated Content Sliding out Smoothly from Right to Left Using jQuery

Unexpected restarts are occurring in a lengthy PHP script

Why does the styling of the inner Span adhere to the style of the outer Span?