在传单弹出窗口中呈现视图或车把模板

时间:2013-10-01 14:35:46

标签: ember.js leaflet

我对ember-leaflet库以及正确使用弹出窗口有疑问。

ember-leaflet website中的以下示例使用库添加标记和链接的弹出窗口。它还说明了如何通过内容绑定为弹出窗口添加内容。

RadMarkersApp = Ember.Application.create();
RadMarkersApp.MarkerLayer =
  EmberLeaflet.MarkerLayer.extend(
    EmberLeaflet.DraggableMixin,
    EmberLeaflet.PopupMixin, {
  popupContentBinding: 'content.title'
});

RadMarkersApp.MarkerCollectionLayer =
  EmberLeaflet.MarkerCollectionLayer.extend({
    content: [{
      location: L.latLng(40.7127, -74.0060),
      title: 'City Hall'}],
    itemLayerClass: RadMarkersApp.MarkerLayer
  });

RadMarkersApp.IndexView =
  EmberLeaflet.MapView.extend({
    childLayers: [
      EmberLeaflet.DefaultTileLayer,
      RadMarkersApp.MarkerCollectionLayer]});

现在我希望能够在此处使用popupContent属性的视图或Handlebars模板。有人有任何想法如何实现这一点?这种情况是否有最佳实践?

我的第一个方法:

App.MarkerLayer =
  EmberLeaflet.MarkerLayer.extend(
    EmberLeaflet.PopupMixin, {

    popupContent: function() {
      // Render view (how to get?) or handlebars template
      return Ember.TEMPLATES['popup-content'](this.get('content'))
    }.property()
  });

这会导致以下错误:

Uncaught TypeError: Cannot call method 'push' of undefined 

希望有人可以提供帮助。

1 个答案:

答案 0 :(得分:3)

我是一个小白痴,无法在文档中查找有用的功能。

我能够通过一点点黑客和Ember.View#createElement的帮助解决这个问题:

App.MarkerLayer = EmberLeaflet.MarkerLayer.extend(EmberLeaflet.PopupMixin, {
  popupContent: function() {
    view = this.view = this._parentLayer.createChildView('map-popup');
    view.set('context', this.get('content'));
    Ember.View.states.inDOM.enter(view)
    view.createElement();

    return view.get('element');
  }.property()
});

希望这会有所帮助。