将值从 ember 组件发送到父模板答案

【问题标题】：send value from ember component to parent template将值从 ember 组件发送到父模板
【发布时间】：2017-03-14 03:23:13
【问题描述】：

我想将 lat 和 lng 从 ember 组件传递到另一个 ember 组件 (g-map)。我的车把模板：

  {{!-- Index.hbs --}}
  <div class="jumbotron-outside">
  <div class="jumbotron">
    <h1 class="display-3">See The Weather Outside :)</h1>
    <p class="lead">This is a simple forecast weather.</p>
    <hr class="my-4">
    <p>Just type everything bellow this input text to get all list of the city</p>
    {{text-autocomplete}}
    <p class="lead">
      <button class="btn btn-primary btn-default" href="#" role="button" disabled={{isDisabled}}>Search</button>
    </p>
  </div>
  {{g-map lat=lat lng=lng zoom=zoom}}
</div>

这是我的文本自动完成组件：

// text-autocomplete/component.js
import Ember from 'ember';

let lat;
let lng;
export default Ember.Component.extend({
    didInsertElement() { //dom can be acessed here :)
        var autocomplete = new google.maps.places.Autocomplete($('input')[0]);
        var parent = this.$('input');
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            lat = place.geometry.location.lat();
            lng = place.geometry.location.lng();
        });
    }
});

我想将text-autocomplete 组件中的lat 和lng 值传递给g-map 组件以在谷歌地图中绘制标记。

谁能解决这个问题？ :(

【问题讨论】：

标签： javascript google-maps ember.js ember-components ember-controllers

【解决方案1】：

创建index.js控制器文件并引入lat、lng和zoom属性。您可以将此属性传递给组件text-autocomplete 和g-map。 text-autocomplete 这个组件应该向控制器发送操作以更新 lat 和 lng 的新值，因为两种方式绑定它也会在其他地方自动更新。

index.js 控制器文件，

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 文件

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.
        });
    }
});

【讨论】：