Leaflet popup clears content on first close

Question

for my app I'm using Leaflet and I went pretty far with it, so I'm sure I understood the "leaflet way" of getting things done.

As I have exactly one static layout for all of my markers I created a simple Mustache template, which inserts the variable data and gives me my HTML:

can.view("leads/popup", viewOptions)

This works as expected and results in a HTML string, which gets properly displayed.

But when I close and reopen the popup it results in an empty popup content.

var popup = L.popup({maxWidth: 1000, closeOnClick: true}, marker);
popup.setContent(can.view("leads/popup", viewOptions));

var marker = L.marker(L.latLng(lng, lat),
  {icon: L.divIcon({
    className: 'lead-icon lead_'+lead._id.$oid,
    iconSize: [size, size],
    html: '<span class="marker-label">' + label + '</span>'
  })
});

marker.bindPopup(popup);
self.displayMarker(marker);

What I thought was extending the L.Popup class and set _content fixed to my HTML code. But I'm unsure if it isn't a little bit overpowered.

Thanks a lot for your help,

Stephan

Answer 1

Ok I finally found the point where it failed:

can.view returns a DocumentFragment which seems to work in the initial build.

In the L.Popup source I found a line of code where they match the type against string - a DocumentFragment is handled as an object.

I solved it by using can.view.render("leads/popup", viewOptions), which returns me a string with rendered HTML.