Bootstrap Modal funktioniert nicht für mich (Ember JS)

Question

Ich versuche Bootstrap für Ember Addon https://github.com/ember-addons/bootstrap-for-ember zu verwenden, aber nicht jede Einstellung funktioniert für mich. Zum Beispiel, wenn ich versuche einfach Alarm Funktion zu nutzen, es funktioniert für mich aber wenn ich versuche, modal zu verwenden, um mit Button-Klick Aktion, die ich diesen Fehler:

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. 

hier ist der Code für modal innen Vorlage:

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

ich bin mit folgenden Ausführungen: Lenker 1.3.0 jquery 1.9.1 Ember 1.3.1

ich Chrom auf ubuntu 12.04 verwenden.

Und das ist die Hierarchie der enthaltenen Dateien:

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

Weiß jemand, wie kann ich dieses Problem lösen?

Answer 1

Man muss die "Show" -Aktion im Controller implementieren und der Name des Controllers muss der richtige sein (abhängig vom Namen des Routers/Templates). Hier ist mein Code: Template 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 
});