EzDevInfo.com

Creating a Twitter Bootstrap modal in an EmberJS application using bootstrap-for-ember

Following the guides here, to create a modal dialog programatically.

<h1 class="page-header">Welcome!</h1>

{{bs-button title="Create Modal" clicked="createModalProgramatically"}}

I created a modal_controller.js file and inside it:

MyEmberApp.IndexController = Ember.Controller.extend({
  manualButtons: [
      Ember.Object.create({title: 'Submit', clicked:"submitManual"}),
      Ember.Object.create({title: 'Cancel', dismiss: 'modal'})
  ],

  actions: {
    submitManual: function() {
      Bootstrap.NM.push('Modal destroyed!', 'success');
      return Bootstrap.ModalManager.close('manualModal');
    },
    createModalProgramatically: function() {
      //@property {string} The name of the modal, required later to close the modal (see submitManual function above)
      //@property {string} The title of the modal.
      //@property {string} The template name to render within the modal body, a View class may also be specified.
      //@property {array} Array of Button meta data
      //@property {object} The controller instance that instantiate the modal.
      Bootstrap.ModalManager.open('manualModal', 'Hello', 'index', this.manualButtons, this);
    }
  }
});

I want to extend the ApplicationController (not the index controller) because I want to be able to invoke a modal dialog from anywhere in the application programatically.

How can I accomplish this without repeating my modal code on every controller I want to use a modal?

What am I missing here? Thanks!

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

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.

Ember Components not styling Tabs

This question is specifically pertaining to using http://indexiatech.github.io/ember-components not Ember Components in general.

I followed the manual installation method as shown on http://indexiatech.github.io/ember-components/#/getstarted and to make sure that my version of jquery, handlebars, and ember is compatible, I used the ones that were installed by bower. I've also linked to the necessary bootstrap stylesheet. To test the installation, I simply used the skeleton code from ember's starter kit. When I pasted in the example code for Tabs, I get

• Foo
• Bar
• Baz

Foo Content

When I was supposed to get Tabs. I've created a jsbin not with the exact same versions of ember and jquery as what I'm using but the results appeared to be the same. Any feedback would be appreciated.