Bootstrap Modal不适用于我（Ember JS）

问题描述：

我正在尝试使用Bootstrap作为烬插件https://github.com/ember-addons/bootstrap-for-ember，但并非每个设置都适用于我。例如，当我尝试使用简单的警报功能，它为我的作品，但是当我尝试使用带有按钮的点击操作模式我得到这个错误：Bootstrap Modal不适用于我（Ember JS）

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>

我使用的是以下版本：handlebar 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>

有谁知道我怎么能解决这个问题呢？

这将是更好的答案从您的问题编辑移动到真正的答案。回答你自己的问题没有错。 – kunerd

使用您的答案来实际创建答案，并将其从问题中删除。 – RustyToms

答

需要在控制器中实现“显示”操作，并且控制器的名称必须正确（取决于路由器/模板名称）。这里是我的代码：模板代码：

模板代码：

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

Bootstrap Modal不适用于我（Ember JS）

相关推荐