使用EmberJS捕獲動態生成的複選框checked事件

Question

嗨我在我的應用程序中使用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加載該視圖中mapbox如下

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

現在將autoamtically genrate這些複選框疊加後我的問題是如何訪問使用燼複選框財產，因爲複選框會自動呈現b y添加了地圖BoxJS的疊加層，並且我將如何檢查複選框。 基於複選框事件我要地圖

上顯示標記列表請幫我打電話給基礎上的複選框事件

 this.createMarkers(); 

Answer 1

我想你可能有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'); 
},