PopupViewClass breaks in Ember 1.8 beta

[edance]

Ember 1.8-beta removes _insertElementLater.

It looks like all of the _insertElementLater block could be replaced with this._popupView.constructor.renderer.appendTo(this._popupView, this._popup._contentNode);

I tried to make a pull request but I couldn't figure out how to update to Ember 1.8-beta to run the tests.

[miguelcobain]

I believe it is related with https://github.com/emberjs/ember.js/issues/5534

[edance]

Thanks for your help @miguelcobain! I switched out that code to use plain Handlebars as a temporary fix for now.

[pedrokost]

@edance, could you provide an example of how you worked around the issue?

[edance]

Sorry @pedrokost for the delay. Here is what I do. I render it offscreen to the body. Then after rendering I grab the html. Probably not the cleanest solution but it worked.

createAndOpenPopup: function() {                                                                                                                                                                                                            
  var properties, view, viewClass;                                                                                                                                                                                                                          
  viewClass = this._container.lookupFactory("view:" + this.popupViewClass);                                                                                                                                                                 
  if (this._popupView) {                                                                                                                                                                                                                    
    this._popupView.destroy();                                                                                                                                                                                                              
  }                                                                                                                                                                                                                                         
  view = viewClass.create({                                                                                                                                                                                                                 
    controller: this._controller // you will want to include your data as well                                                                                                                                                                                                 
  });                                                                                                                                                                                                                                       
  this._popupView = view;                                                                                                                                                                                                                   
  view.append();                                                                                                                                                                                                                            
  return Ember.run.scheduleOnce("afterRender", this, function() {                                                                                                                                                                                                                                                                                                                                                             
    return this.bindPopup(view.$().html(), this.popupOptions).openPopup();                                                                                                                                                                  
  });                                                                                                                                                                                                                                       
}         

[pedrokost]

I was able to get it working by overriding _createPopupContent:

 _createPopupContent: function() {
    if(!get(this, 'popupViewClass')) {
      this._popup.setContent(get(this, 'popupContent'));
      return;
    }
    if(this._popupView) { this._destroyPopupContent(); }
    var viewClass = get(this, 'popupViewClass');
    if(Ember.typeOf(viewClass) === 'string') {
      viewClass = get(this, 'container').lookupFactory('view:' + viewClass);
    }
    this._popupView = viewClass.create({
      container: get(this, 'container'),
      controller: get(this, 'controller'),
      context: get(this, 'content'),  // NOTE: not the controller, but the actual data of the marker
      content: get(this, 'content')
    });

    this._popupView.append();

    Ember.run.scheduleOnce('afterRender', this, function() {
      this._popup._contentNode.innerHTML = ''; // HACK to prevent adding duplicates on each click
      this._popupView.$().appendTo(this._popup._contentNode);
    // After the view has rendered, call update to ensure
    // popup is visible with autoPan
      this._popup.update();
    });
  },

One issue with this code it that clicking multiple times on the marker, each time appended a new view to the popup, keeping the previous one. Therefore, I clear the previous content with this._popup._contentNode.innerHTML = '';. What is a better way to fix this?

[srt32]

Has anyone come up with a more up to date solution than the ones posed above?

[miguelcobain]

Meanwhile, you can check this: https://github.com/gabesmed/ember-leaflet/blob/ember-cli-es6/app%2Fmixins%2Fpopup.js#L57-L87

[srt32]

Thanks @miguelcobain! Could you elaborate on https://github.com/gabesmed/ember-leaflet/blob/ember-cli-es6/app%2Fmixins%2Fpopup.js#L74-L77. This implementation is still not quite right?

// You can't call this._popupView.replaceIn because it erroneously detects
// the view as an Ember View because the popup's parent map's parent view 
// is an Ember View. So we need to trick it by calling the renderer's 
// replace function.

[miguelcobain]

Well, @gabesmed is the author of that part. But it obviously is a sensible part since we're using internals (private API).

Tell us if you have an alternative.

[gabesmed]

@srt32 yeah I wrote that and it appears to work with modern embers? not sure what your question is

[gabesmed]

this is part of the es6 migration which we'll hopefully finish real soon

[srt32]

@gabesmed thanks for the response. I misread the code. Makes sense!