0

I'm rewriting my JS code to make it more clear and precise. I define one module in namespace and not able to pass the same variable in that bind function, see below code:

// Gmap Autocomplete initialization and reset function
var gMapPlace = gMapPlace || {};
gMapPlace.geoAutocomplete = (function(){
    var detail = {
        searchEle : null,
        autocompleteEle : null,
        autocompleteLsr : null,
        init : function(searchEle){
            this.searchEle = searchEle;
            this.autocompleteEle = new google.maps.places.Autocomplete(this.searchEle);
            this.autocompleteLsr = google.maps.event.addListener(this.autocompleteEle, 'place_changed', function () {
                var data = gMapPlace.geoAutocomplete.data; 
                // ################################
                var place = data.autocompleteEle.getPlace(); // any way to reference simple 'this.autocompleteEle' here
                // ################################
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                alert(mesg);
            });

        },
        reset : function(){
            if(isNotBlank(this.searchEle)){
                google.maps.event.clearInstanceListeners(this.searchEle);
            }
        }
    };
    return{
        data : detail
    };

}());

As per the above code, I've a bind function at this.autocompleteLsr which runs when that particular event happen, when I directly use var place = this.autocompleteEle.getPlace(), then it gives undefined error run-time. Now in order to work I code it to get the value by iterating over the namespace object like

var data = gMapPlace.geoAutocomplete.data; 
// ################################
var place = data.autocompleteEle.getPlace();// any way to reference simple 'this.autocompleteEle' here
// ################################

Is there any other way to reference module variables at run-time or that's the only way here.

6
  • You could use an arrow function, which will allow you to use the enclosures this inside the function as arrow functions do not generate their own this. You could also just use detail.autocompleteEle in the function as by that time it will have a value filled. Commented Apr 23, 2018 at 10:41
  • Well my problem is not with this, at the runtime when that event happen how can I use variable gMapPlace.geoAutocomplete.data.autocompleEle without iterating through like because this function is initialized within this namespace context, why can't I directly use the variable like this.autocompleteEle. Commented Apr 23, 2018 at 10:49
  • Then you have not shown the correct runtime code. If you do something like eventHandlerFunction.bind( gMapPlace.geoAutocomplete.data ) you should be able to use this inside the eventHandlerFunction. For some reason I feel you might have overcomplicated this a bit. Commented Apr 23, 2018 at 10:56
  • Yes, I completely agree on that we can run-time pass this variable there and then refer it with this keyword. but i just wanted to sure that Is there any other way we can refer this variable, other then what I did. I'm a bit confuse like is it the right way or not which I did. Commented Apr 23, 2018 at 11:00
  • You get use a getter for this? data = { get autoCompletelEle(){ /* code to get element, return element */ }? But if the function is asynchornous, you won't be able to do that. Commented Apr 23, 2018 at 11:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.