Ember Gain a comprehensive understanding of the flow of execution between route and controller

Question

Ember Gain a comprehensive understanding of the flow of execution between route and controller

Below is a snippet of my "box" route/controller:

export default Ember.Controller.extend({
    initialized: false,
    type: 'P',
    status: 'done',
    layouts: null,
    toggleFltr: null,
    gridVals: Ember.computed.alias('model.gridParas'),
    gridParas: Ember.computed('myServerPars', function() {
        this.set('gridVals.serverParas', this.get('myServerPars'));
        this.filterCols();

        if (!this.get('initialized')) {
            this.toggleProperty('initialized');
        } else {
            Ember.run.scheduleOnce('afterRender', this, this.refreshBox);
        }

        return this.get('gridVals');
    }),
    filterCols: function()
    {
        this.set('gridVals.layout', this.get('layouts')[this.get('type')]);
    },
    myServerPars: function() {
        // Code to set serverParas
        return serverParas;
    }.property('type', 'status', 'toggleFltr'),
    refreshBox: function(){
        // Code to trigger refresh grid
    }
});

The structure of my route is as follows:

export default Ember.Route.extend({
    selectedRows: '',
    selectedCount: 0,
    rawResponse: {},
    model: function() {
        var compObj = {};
        compObj.gridParas = this.get('gridParas');
        return compObj;
    },
    activate: function() {
        var self = this;
        self.layouts = {};

        var someData = {attr1:"I"};
        var promise = this.doPost(someData, '/myService1', false); 
        promise.then(function(response) {       
            // Code to use response & set self.layouts
            self.controllerFor(self.routeName).set('layouts', self.layouts);
        });
    },
    gridParas: function() {
        var self = this;
        var returnObj = {};
        returnObj.url = '/myService2';
        returnObj.beforeLoadComplete = function(records) {          
            // Code to use response & set records
            return records;
        };
        return returnObj;
    }.property(),   
    actions: {      
    }
});

This is how my template looks like:

{{my-grid params=this.gridParas elementId='myGrid'}}

Snippet of my doPost method:

doPost: function(postData, requestUrl, isAsync){
    requestUrl = this.getURL(requestUrl);
    isAsync = (isAsync == undefined) ? true : isAsync;
    var promise = new Ember.RSVP.Promise(function(resolve, reject) {
        return $.ajax({
            // settings
        }).success(resolve).error(reject);

    });
    return promise;
  }

As I was debugging the flow/sequence of execution in my setup, I encountered 2 specific questions:

I noticed that the "gridParas" hook is executed before the "activate" hook, which was unexpected. Is this due to the presence of "gridParas" in the template?

In order to ensure that the code inside filterCols() controller is executed only after receiving a response from /myService1, I had to make a "sync" request using this.doPost(). How can I achieve this with an "async" request without causing errors?

Just to mention, I am working with Ember v 2.0

javascript ajax ember.js ember-cli rsvp-promise

Answer 1

Answer №1

activate() on the route is triggered after the beforeModel, model and afterModel hooks. These 3 hooks are part of the "validation phase" which determines if the route will resolve. This route hook does not relate to using gridParas in your template, but focuses on calling get('gridParas') within your model hook.
The connection of doPost() to the rest of your code is not clear. However, since it returns a promise object, you can chain a then() function to wait for the response before using it in your code further.

Here is a simple example:

this.doPost().then((theResponse) => {
  this.doSomethingWith(theResponse);
});

If you can provide a clearer and more concise question, I may be able to offer additional insight.

Answer 2

activate() on the route is triggered after the beforeModel, model and afterModel hooks. These 3 hooks are part of the "validation phase" which determines if the route will resolve. This route hook does not relate to using gridParas in your template, but focuses on calling get('gridParas') within your model hook.
The connection of doPost() to the rest of your code is not clear. However, since it returns a promise object, you can chain a then() function to wait for the response before using it in your code further.

Here is a simple example:

this.doPost().then((theResponse) => {
  this.doSomethingWith(theResponse);
});

If you can provide a clearer and more concise question, I may be able to offer additional insight.

Answer 3

Answer №2

Typically, at this stage, it is important to clarify your objectives rather than just inquiring about the process itself. It seems like there may be some resistance against the framework!

Let's address your concerns.

To begin with, you can eliminate your doPost method! Utilize jQuery's $.ajax, which returns a thenable that can be converted into a Promise using Ember.RSVP.resolve.

Furthermore, if you intend to retrieve data before rendering anything, it should be done within the model hook.

It's unclear whether you need to fetch data from /service1 first and then make a subsequent request to

/service2</code, or if you can independently fetch both services and display the combined data (perhaps in a grid). Let's explore both scenarios:</p>

<hr />

<p>If you can fetch both services independently, implement the following in your routes' <code>model

hook:

return Ember.RSVP.hash({
  service1: Ember.RSVP.resolve($.ajax(/*your request to /service1 with all necessary data and parameters, potentially utilizing query-params*/).then(data => {
    return data; // extract the required data, perform any necessary transformations.
  },
  service2: Ember.RSVP.resolve($.ajax(/*your request to /service2 with all necessary data and parameters, potentially utilizing query-params*/).then(data => {
    return data; // extract the required data, perform any necessary transformations.
  },
});

If the response from /service1 is needed to fetch data from

/service2</code, follow this approach in your model hook:</p>

<pre><code>return Ember.RSVP.resolve($.ajax(/*/service1*/)).then(service1 => {
  return Ember.RSVP.resolve($.ajax(/*/service2*/)).then(service2 => {
    return {
      service1,
      service2
    }; // this object will then be accessible as `model` for your controller
  });
});

If these solutions do not address your issues (though I believe they should resolve them), please provide further details about your problem.

Answer 4

Typically, at this stage, it is important to clarify your objectives rather than just inquiring about the process itself. It seems like there may be some resistance against the framework!

Let's address your concerns.

To begin with, you can eliminate your doPost method! Utilize jQuery's $.ajax, which returns a thenable that can be converted into a Promise using Ember.RSVP.resolve.

Furthermore, if you intend to retrieve data before rendering anything, it should be done within the model hook.

It's unclear whether you need to fetch data from /service1 first and then make a subsequent request to

/service2</code, or if you can independently fetch both services and display the combined data (perhaps in a grid). Let's explore both scenarios:</p>

<hr />

<p>If you can fetch both services independently, implement the following in your routes' <code>model

hook:

return Ember.RSVP.hash({
  service1: Ember.RSVP.resolve($.ajax(/*your request to /service1 with all necessary data and parameters, potentially utilizing query-params*/).then(data => {
    return data; // extract the required data, perform any necessary transformations.
  },
  service2: Ember.RSVP.resolve($.ajax(/*your request to /service2 with all necessary data and parameters, potentially utilizing query-params*/).then(data => {
    return data; // extract the required data, perform any necessary transformations.
  },
});

If the response from /service1 is needed to fetch data from

/service2</code, follow this approach in your model hook:</p>

<pre><code>return Ember.RSVP.resolve($.ajax(/*/service1*/)).then(service1 => {
  return Ember.RSVP.resolve($.ajax(/*/service2*/)).then(service2 => {
    return {
      service1,
      service2
    }; // this object will then be accessible as `model` for your controller
  });
});

If these solutions do not address your issues (though I believe they should resolve them), please provide further details about your problem.

Ember Gain a comprehensive understanding of the flow of execution between route and controller

Answer №1

Answer №2

Similar questions

JavaScript's version of "a certain phrase within a text"

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Unsubscribing from a service method in Javascript using RxJS

Automate Zoom join function with the help of puppeteer

Is there a way to input the Sno data into the database in ascending order?

How can I include inline CSS directly within a string instead of using an object?

Struggling to send information to the data layer on every page in Angular 9

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

The post method in Express.js is having difficulty parsing encoded data accurately

Decision on how to exchange data (JSON or traditional method)

Tips for retrieving the checked status of a Material UI <Checkbox/> component and changing it to false upon clicking a different icon (such as a delete icon)

Encountering a problem where updating the selected option in a dropdown does not properly refresh the HTML

Exploring the power of "this" in Vue.js 2.0

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

Checking the validity of subdomain names using JavaScript/jQuery

"Troubleshooting Problem with JSON Encoding in PHP and Parsing with getJSON in

What is causing the net::ERR_CONNECTION_RESET in Node JS and ExpressJS?

"Exploring the versatility of using variables in jquery's .css

VueJS fails to display table information

I could use some assistance with deciphering JSON data