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!
Source: (StackOverflow)
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.
Source: (StackOverflow)
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 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.
Source: (StackOverflow)