Javascript 使用EmberJS捕获动态生成的复选框选中事件

您好，我在我的应用程序中使用了emberjs和mapbox.js，根据mapboxjs，一旦我的页面加载，它将自动显示地图以及地图上的覆盖图[复选框]

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();

    });

在HBS中加载此视图后，映射框将自动生成这些复选框覆盖，如下所示

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

---

我认为您可能必须使用jQuery来处理这个问题。在didInsertElement的末尾，在复选框中添加jQuery事件侦听器：

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

在视图被破坏之前，不要忘记清除事件：

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

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