twitter-bootstrap - Bootstrap Modal 不适合我(Ember JS)

Question

我正在尝试将 Bootstrap 用于 ember 插件 https://github.com/ember-addons/bootstrap-for-ember但并非所有设置都适合我。例如，当我尝试使用简单的警报功能时，它对我有用，但是当我尝试使用带有按钮单击操作的模式时，我收到此错误:

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.

这是模板内模态的代码:

<script type="text/x-handlebars" id="cards/index">
    {{bs-button title="Show Modal" clicked="show"}}
        {{#bs-modal name="myModal" fade=true footerButtonsBinding="myModalButtons" title="My Modal"}}
            <p>Modal content!</p>
        {{/bs-modal}}
</script>

我正在使用以下版本: Handlebars 1.3.0 jquery 1.9.1 ember 1.3.1

我在 ubuntu 12.04 上使用 chrome。

这是包含文件的层次结构:

<!--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>

有谁知道我该如何解决这个问题？

Answer 1

需要在 Controller 中实现“显示”操作，并且 Controller 的名称必须是正确的(取决于路由器/模板名称。)。这是我的代码: 模板代码:

模板代码:

{{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 代码:

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
});