Conditional Meteor return false

Question

Im very new to Meteor, but so far Im really enjoyed the coding on the platform. I ran into a small obstacle and cannot find the right path. I want to create a helper function that will check lat and long and check it for some predetermined range if it falls between them and returns true.

I have included the code that I have:

Template.header.helpers({ locationCheck: function() { navigator.geolocation.getCurrentPosition(success_callback,error_callback); function success_callback(p){ // Building Latitude = 51.522206 // Building Longitude = -0.078305 var lat = parseFloat(p.coords.latitude); var lon = parseFloat(p.coords.longitude); console.log('Latitude: '+lat); console.log('Longitiude: '+lon); if( lat >= 51.521606 && lat <= 51.522606 && lon >= -0.078805 && lon <= -0.077705 ) { console.log('you are in the area'); return 1; } else { console.log('you are not in the area'); return 0; } } function error_callback(p){ return 0; } } }); 

And in my template, I want to use the return value in the handlebars if statement, for example:

  {{#if locationCheck}} {{loginButtons}} {{else}} <p>Your are out of the vicinity</p> {{/if}} 

The problem is that it sequentially returns the result of the else statement, although in the console it returns this you are in the area .

Any help would be awesome.

Thanks in advance.

Answer 1

This is because of the callback pattern. Helpers have already returned undefined by the time callbacks return data. You need to use synchronous javascript inside helpers, and if during asynchronous operation use reactive Meteor Session hashes to transfer data through:

 Template.header.helpers({ locationCheck: function() { return Session.get("locationCheck"); }, isLoading:function() { return Session.equals("locationCheck",null); } }); 

Then in your header, when the template is created , you can run the check:

 Template.header.created = function() { navigator.geolocation.getCurrentPosition(success_callback,error_callback); function success_callback(p){ // Building Latitude = 51.522206 // Building Longitude = -0.078305 var lat = parseFloat(p.coords.latitude); var lon = parseFloat(p.coords.longitude); console.log('Latitude: '+lat); console.log('Longitiude: '+lon); if( lat >= 51.521606 && lat <= 51.522606 && lon >= -0.078805 && lon <= -0.077705 ) { console.log('you are in the area'); Session.set("locationCheck",1); } else { console.log('you are not in the area'); Session.set("locationCheck",0); } } function error_callback(p){ return 0; } } 

Once Session.set("locationCheck",1) (or 0 ) is set, the template will be redrawn with the new data.

You can use the isLoading helper when capturing a location:

 <template name="header"> {{#if isLoading}} Loading {{else}} {{#if locationCheck}} {{>template1}} {{else}} {{>template0}} {{/if}} {{/if}} </template> <template name="template0"> <p>Denied</p> </template> <template name="template1"> Approved </template>