ember.js - 在传单弹出窗口中渲染 View 或 Handlebars 模板

Question

我有一个问题要问 ember-leaflet库和弹出窗口的正确使用。

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

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 属性中使用 View 或 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 

希望有人能帮忙。

Answer 1

我是个小白痴，无法在文档中查找有用的函数。

我能够通过一点技巧和 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()
});

希望这对其他人有帮助。