Bootstrap Popovers with ember.js template

Question

I\'m trying to use Bootstrap Popover with EmberJS, so that the content of the popover will be a ember/handlebars template (with binding etc). How can this be done? (Ember 1.0.0-

Answer 1

I took Robert's answer above a bit further. I created a Component and also just use the jQuery element for the content instead of calling .html(). (This alleviates the problem of having duplicated IDs in the page.)

App.CustomPopoverComponent = Ember.Component.extend({
  tagName: 'button',
  classNames: 'btn btn-default',
  type: 'button',
  popoverContentSelector: '',
  didInsertElement: function () {
    var component = this,
        contents = $(component.get('popoverContentSelector'));

    component.$().popover({
      placement: 'bottom',
      html: true,
      content: contents
    }).on('show.bs.popover', function () {
      contents.removeClass('hide');
    });
  },
  willDestroyElement: function () {
    this.$().popover('destroy');
  }
});

I used Bootstrap's 'hide' class to hide the contents initially. Then I removed the 'hide' class the first time to the popover is shown. From then on things work as expected.

This is how to use the component in your handlebars template:

  {{#custom-popover popoverContentSelector='.popoverContents'}}
    Popover Button
  {{/custom-popover}}