Promises using Polymer

Question

I am in the process of extending this great element by Eric: https://github.com/ebidel/geo-location

One of the features that I have added is that I execute a polymer-ajax request based on the returned lat and lng values, something alone the lines of:

<polymer-ajax auto handleAs="json" response="{{data}}" url="http://service/?latlng={{latitude}},{{longitude}}></polymer-ajax>

which returns some data. At the moment there are two requests going out to this service, one fails (as there are no lat & lng values passed into it) and the second one succeeds.

How can I force my ajax call to wait until the lat and lng values exists? (henceforth the promises like behaviour question)

Answer 1

Extend away!

Without seeing code, I suspect what's happening here is that <polymer-ajax> gets the URL, but it's of course incomplete. This still fires the element's internal urlChanged handler. Since you have auto, the request is made with bogus values.

I'd take off auto as Ben suggested and use the event geo-location fires:

<geo-location latitude"{{latitude}}" longitude="{{longitude}}" on-geo-response="{{onLatLng}}"></geo-location>
<polymer-ajax id="ajax" handleAs="json" response="{{data}}" url="http://service/?latlng={{latitude}},{{longitude}}></polymer-ajax>

and handle the event:

onLatLng: function() {
  this.$.ajax.go();
}

BTW, please use <core-ajax> instead. The core-* elements are the elements we'll be supporting moving forward.

github.com/polymer/core-ajax