activating a feature within a component in Ember

Question

activating a feature within a component in Ember

As I transition to my new route, I set the reportName property and I want to trigger an AJAX request based on changes in the reportname. The response from the AJAX call contains data that I need to pass to a graph component as a property, which should then trigger a function within the component. However, I am having trouble implementing this. Could you please advise me on what I might be doing wrong? I am new to Ember.

export default Ember.Controller.extend(ApplicationRouteMixin, {
    sessionService: Ember.inject.service('session'),

    nameOfReport: null,  

    postObject: function(){
        return {
            Name: this.get('nameOfReport'),
            Take: 30,
            Skip: 0,
        };
    }.property('nameOfReport'),


    ajaxResponse: function(){

       var restApiHost = serverPath + '/report';
       var postobj=  this.get('postObject');
       var token =this.get('sessionService.session.authenticated.access_token');

        Ember.$.ajax({
            url: restApiHost,
            type: 'POST',
            data: JSON.stringify(postobj),
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            beforeSend: function (xhr) {
                var bearer = 'Bearer ' + token ;
                xhr.setRequestHeader('Authorization', bearer);
                xhr.setRequestHeader('Content-type', 'application/json');
            },
            success: function (data) {
                var graphobj= {
                    data:  data.data,          
                    graphModel: GraphModel.create({
                        graphHeight: "320",
                        graphMargin: [40, 80, 40, 60],
                        xDomain: [1, 10],
                        yDomain: [1, 100]
                    …
                    })};
                 Ember.set(this,'graphobject', graphobj);    
            },

            fail: function () {
                alert('Could not contact server');
            },
        });
    }.property('postObject'),       

    graphobject: function(){
        this.get('ajaxResponse');
    }.property('ajaxResponse'),

});

Pod Template:

<div>
               {{line-graph model= graphobject }} 
</div>

Component:

drawGraph: function() {
        // define dimensions of graph   
        var graphdata = this.get('model.data');
        var graphmodel = this.get('model.graphModel');
...
}.property('graphobject'),

javascript ajax ember.js

Answer 1

Answer №1

Initially, the line

Ember.set(this,'graphobject', graphobj);

is actually replacing the function stored in the graphobject property -- rendering that function unnecessary.

Moreover, even if the drawGraph property is marked as dirty due to a change in one of its dependent keys (as seen in your code), it will not execute until the property is accessed by some code using get. This could occur during a re-render if the template itself accesses the property, or through an observer or action execution.

To address this, consider making drawGraph observe the graphobject. Furthermore, you may need to call drawGraph upon initialization or insertion:

drawGraph: function() {
    // define graph dimensions
    var graphdata = this.get('model.data');
    var graphmodel = this.get('model.graphModel');
    ...
}.observes('graphobject').on('init')/* or .on('didInsertElement') */,

While most experts advise against observers, without knowledge of what occurs in the drawGraph function, it's challenging to recommend an alternative approach.

If you are updating a property in drawGraph and then displaying that property in a template, consider having drawGraph return the value instead of setting it into another property, and use drawGraph in the template instead of the alternate property. In this case, keep drawGraph as a computed property instead of an observer.

If you are utilizing jQuery to manipulate the DOM within drawGraph, and template manipulation isn't feasible for certain reasons, then employing an observer may be necessary.

Upon further examination of your code, it appears that ajaxResponse should also be observed. However, once again, avoid over-reliance on observers. Consider when it is appropriate to make an AJAX request and re-render the graph. Simply changing the report name might not necessitate an update. Perhaps triggering the request and rendering upon specific user actions like "save" or "view" would be more suitable. It ultimately depends on the structure of your application.

Answer 2

Initially, the line

Ember.set(this,'graphobject', graphobj);

is actually replacing the function stored in the graphobject property -- rendering that function unnecessary.

Moreover, even if the drawGraph property is marked as dirty due to a change in one of its dependent keys (as seen in your code), it will not execute until the property is accessed by some code using get. This could occur during a re-render if the template itself accesses the property, or through an observer or action execution.

To address this, consider making drawGraph observe the graphobject. Furthermore, you may need to call drawGraph upon initialization or insertion:

drawGraph: function() {
    // define graph dimensions
    var graphdata = this.get('model.data');
    var graphmodel = this.get('model.graphModel');
    ...
}.observes('graphobject').on('init')/* or .on('didInsertElement') */,

While most experts advise against observers, without knowledge of what occurs in the drawGraph function, it's challenging to recommend an alternative approach.

If you are updating a property in drawGraph and then displaying that property in a template, consider having drawGraph return the value instead of setting it into another property, and use drawGraph in the template instead of the alternate property. In this case, keep drawGraph as a computed property instead of an observer.

If you are utilizing jQuery to manipulate the DOM within drawGraph, and template manipulation isn't feasible for certain reasons, then employing an observer may be necessary.

Upon further examination of your code, it appears that ajaxResponse should also be observed. However, once again, avoid over-reliance on observers. Consider when it is appropriate to make an AJAX request and re-render the graph. Simply changing the report name might not necessitate an update. Perhaps triggering the request and rendering upon specific user actions like "save" or "view" would be more suitable. It ultimately depends on the structure of your application.

activating a feature within a component in Ember

Answer №1

Similar questions

utilizing javascript to compare the data in a gridview with the value entered in a

I currently possess a certain document stored in the database. Is there a way to create a query using mongoose that will allow me to remove an item from the "cart" array within this document?

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

Using forEach Loop with Promise.all in Node.js

The slice() function is displaying the correct output in the console, but the string is not being updated in the <td>

What methods do publications use to manage HTML5 banner advertisements?

Using the MongoDB aggregate framework to determine the total employee count per unique state

What is the best way to design a timetable schema in MongoDB specifically for a Teacher Schema?

Adding a class to a Vue component using the $refs property

Is it possible to use a variable for the value attribute in a select option?

The message "Error: Unknown custom element: <router-view> - have you properly registered the component?" is prompting for a solution

Easy method for importing videos into NextJs

Is it possible for jQuery AJAX to function correctly on mobile Safari, but encounter issues when used on a

Searching Firestore arrays for objects based on one of two fields

Retrieve the part of a displayed element

Implementing automatic line breaks in Bootstrap

Update the JSON data following deletion

Is there a more efficient way to handle multiple arrays using a combination of .post() and PHP scripts, or can it all be processed in

State of loading getServerSideProps in Next.js

Ways to refresh a webxr session while clearing all models from the scene