Bootstrap for Ember using Ember CLI; can't get popovers component to work

Question

I'm stuck here...

http://ember-addons.github.io/bootstrap-for-ember/#/show_components/popover shows the documentation on how this is supposed to work...quoted below may be the bit I'm not understanding (it's a little confusing because this all mentions tooltips and not popovers but I'm making a leap that since it's all in the same documentation that it's all related...)

For Popover support, it is required to adapt the application route and add a named outlet to your main template and reference a controller that extends from Bootstrap.TooltipBoxController

//Create some controller in your app that references Bootstrap.TooltipBoxController App.TooltipBoxController = Bootstrap.TooltipBoxController

//Application route App.ApplicationRoute = Ember.Route.extend({
    renderTemplate: function() {
        // Render default outlet
        this.render();
        // render extra outlets
        var controller = this.controllerFor('tooltip-box');
        this.render("bs-tooltip-box", {
            outlet: "bs-tooltip-box",
            controller: controller,
            into: "application" // important when using at root level
        });
    } });

Ok fine, so in templates/application.hbs I added this bit:

{{outlet bs-tooltip-box}}

Then, at routes/application.js I added what it said:

renderTemplate: function() {
    // Render default outlet
    this.render();
    // render extra outlets
    var controller = this.controllerFor('tooltip-box');
    this.render("bs-tooltip-box", {
        outlet: "bs-tooltip-box",
        controller: controller,
        into: "application" // important when using at root level
    });
  },

Predictably, upon rebuilding, I get an error that controller named 'tooltip-box' doesn't exist. So I create one: ember g controller tooltip-box Ok, great, now it doesn't puke on that part.

Now here's were things go sideways for me... I'm trying to do this bit:

//Create some controller in your app that references _Bootstrap.TooltipBoxController_
App.TooltipBoxController = Bootstrap.TooltipBoxController

So my assumption is that instead of the generated blueprint of:

import Ember from 'ember';

export default Ember.Controller.extend({
});

I'm guessing need it to say something like this??: <-- this is where I'm stuck

import Bootstrap from 'somewhere I cant seem to figure out';

export default Bootstrap.TooltipBoxController.extend({
});

Additional information: I've added this to a template that's otherwise working fine:

<h2 {{bs-bind-popover testme}}>Click for a popover</h2>

And in the appropriate controller, I've added:

testme: Ember.Object.create({
    title: "Hello world!",
    content: "yup",
    placement: "left"
  }),

It's not complaining about the {{bs-bind-popover}} handlebars and I've tested a couple of other things included and they seem to work OK so I'm fairly confident that I've added the assets to the project properly, etc.

Robert Neville Robert Neville · Accepted Answer · 2014-10-03T18:05:34

Solved it myself.

My issue was misunderstanding of how things are plugged in via ember-cli...and frankly I'm still not 100% clear as some things appear to need to be imported when used, some things create a namespace under Ember and this one (bootstrap for Ember) just sticks Bootstrap as a global namespace. So, the answer to this is that I had everything right, except...

import Bootstrap from 'somewhere I cant seem to figure out';

export default Bootstrap.TooltipBoxController.extend({
});

Should've just been...

export default Bootstrap.TooltipBoxController.extend({
});

...no import needed, though you'll want some jshint comments or else it'll complain at build-time that it isn't defined (hence why I assumed it needed to be imported I guess).

Bootstrap for Ember using Ember CLI; can't get popovers component to work

1 Answers