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中加载此视图后，地图框将自动生成这些复选框覆盖，如下所示

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

现在我的问题是如何使用ember访问checkbox属性，因为复选框将通过添加Map BoxJS的Overlays自动呈现，我如何选中复选框。根据复选框事件，我想在地图上显示标记列表

请帮我根据复选框事件

调用此函数

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

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

1 个答案: