twitter-bootstrap – Bootstrap Modal对我不起作用(Ember JS)

发布时间：2020-12-18 00:25:06 所属栏目：安全来源：网络整理

导读：我正在尝试使用Bootstrap for ember addon https://github.com/ember-addons/bootstrap-for-ember,但不是每个设置都适合我.例如,当我尝试使用简单的警报功能时,它适用于我,但当我尝试使用模式与按钮单击操作时,我收到此错误： Uncaught Error: Nothing handl

我正在尝试使用Bootstrap for ember addon 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>

我使用以下版本：把手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>

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

解决方法

需要在控制器中实现“显示”操作,控制器的名称必须是正确的(取决于路由器/模板名称.).这是我的代码：模板代码：

模板代码：

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

控制器代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!