Bootstrap Modal is not working for me

1

I am trying to use Bootstrap for ember addon https://github.com/ember-addons/bootstrap-for-ember but not every setting is working for me. For example when I try to use simple alert functionality it works for me but when I try to use modal with button click action I get this error:

Uncaught Error: Nothing handled the action ‘didAlertClose’. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

here is the code for modal:

{{bs-button title="Show Modal" clicked="show"}}
    {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
        <p>Modal content!</p>
    {{/bs-modal}}

I am using following versions: handlebars 1.3.0 jquery 1.9.1 ember 1.3.1

I am using chrome on ubuntu 12.04.

And this is the hierarchy of included files:

<!--Alert component -->
    <script src="dist/js/bs-alert.min.js"></script>
    <script src="dist/js/bs-basic.min.js"></script>
    <script src="dist/js/bs-button.min.js"></script>
    <script src="dist/js/bs-modal.min.js"></script>
    <script src="js/app.js"></script>

Does anybody know how can I resolve this problem?

2

I finally figured out the problem. One needs to implement “Show” action in the controller and the name of the controller must be the correct one (Depends on the router/template name.). Here is my code: Template code:

{{bs-button title="Show Modal" clicked="show"}}
                {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
                    <p>Modal content!</p>
                {{/bs-modal}}

Controller code:

Cards.CardsController = Ember.ObjectController.extend({
    myModalButtons: [
        {title: 'Submit', clicked: "submit"},
        {title: 'Cancel', clicked: "cancel", dismiss: 'modal'}
    ],
    actions: {
        changeClass: function() {
            this.set('isActive', !this.get('isActive'));
        }
    },
    isActive: false
});

Cards.CardsIndexController = Ember.ObjectController.extend({
    myModalButtons: [
        {title: 'Submit', clicked: "submit"},
        {title: 'Cancel', clicked: "cancel", dismiss: 'modal'}
    ],
    actions: {
        show: function() {
            return Bootstrap.ModalManager.show('myModal');
        },
        submit: function() {
            Bootstrap.NM.push('Successfully submitted modal', 'success');
            return Bootstrap.ModalManager.hide('myModal');
        },
        //Cancel the modal, we don't need to hide the model manually because we set {..., dismiss: 'modal'} on the button meta data
        cancel: function() {
            return Bootstrap.NM.push('Modal was cancelled', 'info');
        }
    },
    isActive: false
});

may be this will help to somebody else.