未从EmberJS中的组件发送操作

Question

When I close a bootstrap modal, it doesn't send the action it should (in application js:)

application.hbs:

<li><a {{action "showSignInModal"}}>Sign In</a></li>
{{outlet}}
{{outlet 'modal'}}

bootstrap-modal.js:

this.$('.modal').modal().on('hidden.bs.modal', function() {
  alert("Closed");
  this.sendAction('removeModal');
}.bind(this));

routes/application.js:

export default Ember.Route.extend({
  actions: {
    showSignInModal: function() {
      this.render('components.signin-modal', {
        into: 'application',
        outlet: 'modal'
      });
    },
    removeModal: function(){
      alert("Working")
    }
    //...
  }
})

signin-modal.hbs:

{{#bootstrap-modal title="Sign In" ok='signin' okText="Signin"}}
<p>
  Please sign in. Thanks!
</p>
{{/bootstrap-modal}}

The "closed" alert shows, but the "working" alert doesn't. (The signin modal is a component, with no actions defined, and is just a bootstrap-modal)

Answer 1

Actions won't propagate like event bubbing

Wrap your bootstrap modal into a component and give it the removeModal action from the signin-modal to call.

Answer 2

You are not passing your action name properly.

You need to be aware that the sendAction method will fail silently if it can't find the action name.

Make sure inside your template that contains the modal component, you pass a property with the action name you want to call:

{{#bootstrap-modal title="Sign In" ok='signin' okText="Signin" removeModal="removeModal"}}

You can read more about Passing Actions to Components