Nested components

Design
1

Hi there,

happens that I need to integrate a Google map as a component so I asked Google and it came up with a solution like this

export default Ember.Component.extend({
  insertMap: function() {
    var container = this.$('.map-canvas')[0];
    var options = {
      center: new window.google.maps.LatLng(
        this.get('latitude'),
        this.get('longitude')
      ),
      zoom: this.get('zoom')
    };
    var map = new window.google.maps.Map(container, options);
  }.on('didInsertElement')
});

Now I need to add some placemarks and that’s why I wanted to know if nested components are possible with Ember?

{{#google-map latitude="54.18" longitude="12.09" zoom=12}}
  {{google-placemark title="One" lat=54.16 lon=12.05}}
  {{google-placemark title="Two" lat=54.18 lon=12.09}}
{{/google-map}}

If so, can someone describe, how I need to code the map component to know about the placemarks.

Regards, Martin

2

So the parent needs to know about the children? My first suggestion is that nesting the components like that manually is not what you’d want to do. Instead you’d want to pass to the google-map component an array of the data needed to construct those google-placemark components. Then inside of the google-map template, iterate over that array and construct those google-placemark components.

Does this make sense or did I misunderstand?

3

Hey Kyle, this is what I ended with. I added a parameter “placemarks” to the map component. Contains a comma separated string describing the placemarks. The component splits them and adds the marks to itself.

Thanks, Martin

1 Like