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

The forEach method in JavaScript seems to work asynchronously

What is the best way to duplicate/rename/replace an image in PHP while utilizing form submission and radio buttons?

How to use ngModel directive in Angular to select/unselect dynamically generated checkboxes and retrieve their values

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

The following middleware is not functioning properly on a local SSL server

What's preventing me from drawing a line on this D3.js chart with my Angular code?

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions

Troubleshooting $digest problems with AngularJS and the selectize directive

observing the value of the parent controller from the UI router state's resolve function

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

What steps are necessary to activate javascript in HTML for WebView?

What is the process for transferring an environment.json file to the output directory and then utilizing it with Webpack 4?

Is it necessary to always pause before I click?

Learn the step-by-step process of clicking on a button to modify its properties and deactivate it

Encountered an error in Discord.js: Undefined properties unable to be read (execute)

"Encountering a challenge when trying to fetch the value of an undefined or null

Having difficulty grasping the concept of toggleClass and jQuery selectors

Creating a JSON array using looping technique

Unable to assign a value to a null property during the onchange event