将 ember 组件的值发送到父模板
send value from ember component to parent template
我想将 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();
});
}
});
我想将 lat
和 lng
值从 text-autocomplete
组件传递到 g-map
组件以在 google 地图中绘制标记。
谁能解决这个问题? :(
创建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}}
文本-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.
});
}
});
我想将 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();
});
}
});
我想将 lat
和 lng
值从 text-autocomplete
组件传递到 g-map
组件以在 google 地图中绘制标记。
谁能解决这个问题? :(
创建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}}
文本-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.
});
}
});