esbanarango / ember-place-autocomplete

Ember cli addon to provide a component that uses Google Places API to autocomplete place information when people write their address
MIT License
63 stars 62 forks source link

placeChangedCallback and focusOutCallback actions not being called #76

Closed yefan15 closed 5 years ago

yefan15 commented 6 years ago

When I declare placeChangedCallback=(action "placeChanged") I get TypeError: Cannot read property 'apply' of undefined. and when I use placeChangedCallback='placeChanged' it doesn't get called at all. Is there something I need to do special if I am creating a search bar component that is going to be used else where? The logic for the action is defined in my component js file. I am also noticing the same behavior with the focusOutCallback

Here is a snippet:

Template (search-bar-address):

<p id=“message”>Message: {{message}}</p>

<p>Full adddress from JSON sent to the callback: {{{fullAddress}}}</p>

<p>Clean string: {{cleanFullAddress}}</p>

<p> Model address: {{address}}</p>

<div id=“search-bar” data-google-auto="{{googleAuto}}">

<label class=“visually-hidden” for=“input-search”>Add a new address</label>

{{place-autocomplete-field

id=“input-search”

value= address

handlerController= this

placeholder=“Add a new address”

inputClass= ‘place-autocomplete–input’

placeChangedCallback= “addressChanged”

focusOutCallback=“done”

restrictions=googleMapsRestrictions

withGeoLocate= true

}}

<pre style=“font-size: 6px;”>

{{placeJSON}}

</pre>

googleMapsRestrictions: { country: ‘us’, }, 
fullAddress: null, 
googleAuto: null,
 action: { done()
{ console.log(“Reached”); }, 
addressChanged(place) { console.log("***********"+place);

  }
}

Where it is implemented

 {{search-bar-address
          id="search-bar-component"
          }}
dmuneras commented 6 years ago

Hey @yefan15,

It is a little bit complicate to read the code you pasted, but, I created this simple gist that show you how to use it. It looks super simple, but it should work:

https://gist.github.com/dmuneras/1f0de66d2240c862537cb49372804acf

Basically, as long as you have defined the action in the component it should work. As personal comment, just try to avoid using that handlerController, I made a big mistake adding that when I create this project and it is very likely that I am going to remove it in the near future.

Let me know if this help you.

Best regards, Daniel.

yefan15 commented 6 years ago

Yes Daniel this was very helpful, thanks so much!

dmuneras commented 6 years ago

No problem @yefan15, I am glad it helped you.