Ember.js: controller actions not triggered by 'sendAction' from a component

Question

I'm facing some issues in an Ember.js application and some sendAction that do not work. Basically, I have: - an Input component (the one triggering the action) - one controller/template (that contains the rendering of the component) - one other controller / template, in which we render the previous controller.

Here's the code.

First, the text field component:

Tm.JiraCloudInputComponent = Ember.TextField.extend({
  keyDown: function (event) {
    if (event.keyCode === 27) {
      this.sendAction('cancelJiraCloudUrl');
    }

    if (event.keyCode === 13) {
      event.preventDefault();
      this.sendAction('saveJiraCloudUrl');
    }
  },

  blur: function () {
    this.sendAction('saveJiraCloudUrl');
  }
})

The controller that has the actions:

Tm.JiraCloudController = Ember.Controller.extend({
  jiraCloudEnabled: Ember.computed.oneWay('content.jiraCloudEnabled'),
  jiraCloudUrl: Ember.computed.oneWay('content.jiraCloudUrl'),
  successMessage: '',
  errorMessage: '',

  actions: {
    saveJiraCloudUrl: function () {
      if (Tm.isEmpty(this.get('jiraCloudUrl'))) {
        this.unlinkJiraCloud();
      } else {
        this.linkJiraCloud();
      }
    },

    cancelJiraCloudUrl: function () {
      this.set('jiraCloudUrl', this.get('model.jiraCloudUrl'));
      this.set('jiraCloudEnabled', this.get('model.jiraCloudEnabled'));
      this.clearMessages();
    }
  }
});

and its associated template:

{{#default-box id="jira-cloud-settings" class="box-full-width"}}
  {{box-header title="settings.jira_cloud"}}
  {{#box-content}}
    {{jira-cloud-input class="form-control" value=jiraCloudUrl placeholder="Jira cloud url"}}
    <button type="button" class="btn btn-default" title="Link Jira cloud" {{action "saveJiraCloudUrl"}}>Link Jira cloud</button>
  {{/box-content}}
{{/default-box}}

Note: the boxes (default-box, box-content) are also components.

And last, the template in which we render the previous controller:

{{render "jiraCloud" content}}

I can't find anything obvious why it does not work. No error is raised by the 'sendAction' calls. Note that the action on the button works like a charm.

Thanks for your help, Vincent

Note: I tried to remove the boxes component just in case, no effect ... — Vincent

Vincent Vincent · Accepted Answer · 2015-10-13T14:44:00

Well, I've just been stupid in fact. I was too used to the old "send" so I forgot to do the mapping when rendering the component:

{{jira-cloud-input save="saveJiraCloudUrl" esc="cancelJiraCloudUrl" class="form-control" value=jiraCloudUrl placeholder="Jira cloud url"}}

And in the code:

Tm.JiraCloudInputComponent = Ember.TextField.extend({
  keyDown: function (event) {
    if (event.keyCode === 27) {
      this.sendAction('esc');
    }

    if (event.keyCode === 13) {
      this.sendAction('save');
      event.preventDefault();
    }
  },

  blur: function () {
    this.sendAction('save');
  }
})

Ember.js: controller actions not triggered by 'sendAction' from a component

1 Answers