Fetch new data from API in jQuery plugin's callback

Question

I am new to ember, so please treat me like a fool. What I'm trying to do first is to understand the concept.

In my application I heavily rely on few jQuery plugins they fetch new portion of data in their callbacks, that's how these plugins are designed, but I am not sure how can I trigger them to fetch a new portion of data from API passing to API updated query parameters after plugin has been rendered.

I have wrapped the plugin in a component, in component's template I send data to it as (I use emblem.js syntax here)

= plotly-chart chartData=model

In model I have

//app/models/data-points.js

import DS from 'ember-data';

export default DS.Model.extend({
    // time: DS.attr(),
    ch1:  DS.attr(),
    ch2:  DS.attr(),
    ch3:  DS.attr(),
    temperature:  DS.attr(),
});

And then in component itself I fetch data

//app/components/plotly-chart.js

dataPoints: Ember.computed.map('chartData', function(item){
    return item.getProperties('ch1', 'ch2', 'ch3', 'temperature');
}),

and make some manipulations with data, which isn't so important for the question itself.

Ah, and I have a route graph/ which later calls that component

//app/routes/graph.js

import Ember from 'ember';

export default Ember.Route.extend({
    queryParams: {
        start_timestamp: {
            refreshModel: true
        },
        end_timestamp: {
            refreshModel: true
        }
    },
    model(params) {
        return this.get('store').query('data-point', params);
    }
});

So as you see I have tried to fetch new properties via query params, finally it works great if I just update the url in browser, but now can I trigger new call to API and fetch new data and get this new data in a component itself?

Also I'm struggling to understand what role controllers play in all of these. It is mentioned that controllers will be deprecated soon, but still used here https://guides.emberjs.com/v2.10.0/routing/query-params/ My code seems to work without controllers, so this is really confusing.

Also I suspect maybe I should use services for what I'm trying to achieve, but not sure how.

Ember experts, could you please point me into a right direction? The most important thing is how to fetch new portion of data from API with updated query parameters (query parameters to API itself, not nessesarely the ember application, but I suspect in ember-data it is the same thing? or not %) %) %)).

UPDATE 1

Really I should use services for that, shouldn't I? Pass arguments into a service and query a store there. Would that be a correct pattern?

Then query parameters in url are not the same as querying the store and is an independent thing. Am I right?

score 0 · Accepted Answer · answered Dec 20 '16 at 03:33

but how can I trigger new call to API and fetch new data and get this new data in a component itself?

If you change your queryParam values in a controller using an action (combined with your current route setup) it will adjust your route and re-call your API, as the values are bound together to make this particular use case simple :-) You're about 98% of the way there ... :-)

Re controllers going away, they won't for a long time as the replacement hasn't been worked out yet. You could do some of this in a service if you want to, but there is no need as you are almost done.

score 0 · Answer 2 · edited May 23 '17 at 11:45

Thanks, that make sense though. I just worried I'm doing it wrong.

By they way finally I found a way to access store from the controller Access store from component but: 1. I was unable to take out the data from that variable, probably it's me being stupid. 2. I double it's the right way to access store directly in a component and better to use services for that or rely on “Data Down Actions Up” (DDAU) paradigm?

Finally I was able to fetch new portion of a data calling a controller's action from within the controller, but then the next problem raised - the data was updated, but the JS code did not know about that because I feed the jQuery plugin with this data and it did not pick up changes automatically. I think I might be doing it a wrong way there %)

But finally I get it working by adding an Ember's observer to that variable and in observer calling a redraw function (for chart in this particular place).

@acorncom Thanks!

Fetch new data from API in jQuery plugin's callback

2 Answers2