How to send a variable from ember component to parent template?

Create index.js controller file and introduce lat, lng and zoom properties. you can pass this properties to components text-autocomplete and g-map. text-autocomplete this component should send actions to controller for updating new values for lat and lng because of two way binding it will automatically update in other places too.

index.js controller file,

import Ember from 'ember';
export default Ember.Controller.extend({
    lat:'',
    lng:'',
    zoom:'',
    actions:{
        updateLatAndLng(lat,lng){
            this.set('lat',lat);
            this.set('lng',lng);
        }
    }
});

index.hbs\

{{text-autocomplete lat=lat lng=lng updateLatAndLng=(action 'updateLatAndLng')}}
{{g-map lat=lat lng=lng zoom=zoom}}

text-autocomplete.js file

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() { //dom can be acessed here :)
        var autocomplete = new google.maps.places.Autocomplete($('input')[0]);
        var parent = this.$('input');
        let _this = this;
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            lat = place.geometry.location.lat();
            lng = place.geometry.location.lng();
            _this.sendAction('updateLatAndLng',lat,lng); //here we are sendin actions to controller to update lat and lng properties so that it will reflect in all the other places.
        });
    }
});

Leave a Reply

Your email address will not be published. Required fields are marked *

16 − 8 =

Scroll to top