How could a component get a async property?

1

Here is my code:

App.TopWeatherComponent = Em.Component.extend({
    info: function() {
        return $.getJSON('http://192.168.1.39:3000/term_api/get_weather?callback=?').then(function(data) {
            return data;
        });
    }.property()
});

And the following is my component:

<div>{{info}}</div>

But when I see the page which there is a top-weather component, {{info}} represents the promise object instead of the data I want. So how could I get the correct data? I want the data returned by the success function in the then. If the code above is not the right way, then what is the right way? Thanks a lot

2

Have a look at the PromiseProxyMixin on the api pages.

3

Can this be applied to component as well? The url u gave to me is for controllers

4

It could be mixed into a plain Ember object, so if you wanted to use multiple promised objects in a component you could assign properties:

this.set('myObject', Em.ObjectProxy.extend(Em.PromiseProxyMixin).create({
    promise: $.getJSON('/some/remote/data.json')
});

(Demo)

(Note: Ember Data has a PromiseObject defined like this.)

2 Likes
5

Thank you so much, I’ll give it a shot