Ember.js:控制器动作没有被'sendAction'从一个组件

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

本文关键字：组件 一个 sendAction js Ember 控制器      更新时间：2023-09-26

我在Ember.js应用程序和一些不工作的sendAction中面临一些问题。基本上，我有:-输入组件(触发动作的组件)-一个控制器/模板(包含组件的呈现)-另一个控制器/模板，我们在其中呈现前一个控制器。

代码如下:

首先，文本字段组件: 
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');
  }
})

具有动作的控制器:

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();
    }
  }
});

及其关联模板:

{{#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}}

注意:盒子(default-box, box-content)也是组件。

最后，我们在其中呈现前一个控制器的模板:

{{render "jiraCloud" content}}

我找不到任何明显的为什么它不起作用。'sendAction'调用不会引发错误。请注意，按钮上的动作就像一个符咒。

谢谢你的帮助，文森特

好吧，其实我很傻。我太习惯旧的"send"了，所以在渲染组件时忘记了做映射:

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

在代码中:

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');
  }
})
相关文章：