Using EmberJS capture the dynamically generated checkbox checked Events

Question

Hi I am using emberjs and mapbox.js in my application and as per the mapboxjs It will automatically display the map and along with overlays[checkboxes]on the map once my page loads

App.FullMap = Ember.View.extend({

/**
 * Public construction properties
 */
vehicles: [],

/**
 * Private properties & methods
 */
_vmarkers: [], 
classNames: ['map full-map'],


didInsertElement: function() {
    this.map = L.map(this.get('element'), {
        minZoom: 4,
        maxZoom: 16,
        attributionControl: false,
        worldCopyJump: true
    });

    this.set('controller.map', this.map);
    var overlays = [];
    overlays['2 wheelers'] = {name:"2 wheelers"};
    overlays['3 wheelers'] = {name:"3 wheelers"};
    overlays['4 wheelers'] = {name:"4 wheelers"};
    overlays['Heavy Load'] = {name:"Heavy Load"};


    // Build the layer control
    _.maps.layerControl(this.map, 'topleft', {
        normal: true,
        satellite: true
    }, overlays);

 $('.leaflet-map-pane').addClass('normal-view');
  this.createMarkers();

    });

After loading this view in HBS the mapbox will autoamtically genrate these checkbox overlays as follows

    <div class="leaflet-control-layers-overlays">
  <label><input type="checkbox" class="leaflet-control-layers-selector<span>            2          wheelers</span></label>
      <label><input type="checkbox" class="leaflet-control-layers-selector"><span> 3 wheelers</span></label>
      <label><input type="checkbox" class="leaflet-control-layers-selector"><span> 4 wheelers</span></label>
       <label><input type="checkbox" class="leaflet-control-layers-selector"><span> Heavy Load</span></label>
   </div>

Now My Question is how to access the checkbox property using ember,because that checkboxes will be automatically rendered by added Overlays of the Map BoxJS,and How can I will be check the checkbox. Based on the checkbox event I want to display list of markers on the map

Kindly help me to call this function based on the checkbox event

      this.createMarkers();

BenjaminRH BenjaminRH · Accepted Answer · 2014-09-28T20:02:01

I think you might have to handle this with jQuery. At the end of the didInsertElement, add a jQuery event listener on the checkboxes:

didInsertElement: function() {
    var that = this;

    // Other mapbox code here...

    this.$('.leaflet-control-layers-selector:checkbox').on('change', function() {
        that.createMarkers(); // Call your function here. Use `that` rather than `this` to access the parent scope
    });
},

And don't forget to clear the event before the view is destroyed:

willDestroyElement: function() {
    this.$('.leaflet-control-layers-selector:checkbox').off('change');
},

Using EmberJS capture the dynamically generated checkbox checked Events

1 Answers