Emberjs outlet inside a bootstrap popover

Question

I'm using bootstrap popover in my app and I need to render an outlet inside it.

I have this nested route :

this.resource('pages', function(){
    this.resource('page', { path: ':id' }, function(){
        this.resource('edit', function(){
            this.resource('images', function(){
                this.resource('image', { path: ':image_id'}, function(){
                    this.route('edit');
                })
            }); 
        }); 
    });
});

When the user is here => /pages/1/edit/ when he click on an image it route to /images but render the {{outlet}} inside the popover like this :

<div class="popover-content hide">
    {{outlet}}
</div>

This is my popover initialisation :

 $img.popover({
       html: true,
       content: function() { 
       return $('.popover-content').html(); //need to have the outlet here
       }
  }); 

So far, it render correctly my outlet, but inside the images template, I have some button that modify the DOM and it doesn't update the html. Unless if I close and open the popover again I can see the modification.

Is it possible to render the outlet directly inside the code ? or is it possible to have my popover being updated ?

Thanks for the help.

Answer 1

Ember and Handlebars don't like this because it's basically copying the html content of a div and plopping it into another. But that html alone isn't everything that's needed. Ember is magic and there's lots of stuff happening in the background.

Your hidden div is real ember stuff, so let's try not to mess with it by calling .html() on it. My idea is to literally move the DOM itself instead.

first, modify your popover function call to always create this placeholder div:

content: '<div id="placeholder"></div>',

next, detach the content div from the dom in the didInsertElement of the view:

// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();

// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);

// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved.  we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
    content.appendTo("#placeholder");
});

since the content div is immediately detached when didInsertElement is called, you can remove the "hide" css class from the content div.

edit: i tried this on my own project and it broke two-way binding. the controller updated my handlebars elements, but any two-way bound {{input}} helpers did not update the controller/model. i ended up using a single-item dropdown menu, and used this to prevent the menu from closing too quickly: Twitter Bootstrap - Avoid dropdown menu close on click inside

Answer 2

See these links for an alternative approach to putting Ember stuff in Bootstrap popovers:

Bootstrap Popovers with ember.js template

https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html