javascript - 是否可以在 EmberJS 组件中注入(inject) Controller 或其他类？

Question

我正在尝试使用组件内一个 Controller 的方法，但一定有问题。

我有路线/calendars及其自己的 Controller (controllers/calendars.js)和模板(templates/calendars.hbs)

在calendars.hbs内部，我已经实现了一系列组件，其中包含应用程序主屏幕和菜单的模板。在菜单中，我有最后一个组件，应该调用日历的 Controller 方法。

Controller :

import Ember from 'ember';

export default Ember.Controller.extend({
  actions:{
    createCalendar: function(){
      console.log("app/controllers/calendars.js");
    }
  }

});

路线:

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin,{
  model: function(params) {
    return [
      {id:"1", name:"Calendario de trabajo", shared:false, position: 0},
      {id:"2", name:"Calendario personal", shared:false, position: 1},
    ];
  },

  actions:{
    createCalendar: function(calendar){
      console.log("app/routes/calendars.js");
    }
  }
});

组件:

import Ember from 'ember';

export default Ember.Component.extend({

  calendars: Ember.inject.controller("calendars");

  actions: {
    createCalendar: function(){
      console.log("app/components/menu/calendar-dock-footer.js");
      this.calendars.createCalendar();
    }
  }
});

模板:

日历.hbs

{{#main-template}}
  {{#link-to "calendars.new" (query-params posX=150 posY=50)}} Show me the money! {{/link-to}}
  {{outlet}}
  {{calendars.full-calendar size="calendar" action="createEvent"}}
{{/main-template}}

main-template.hbs(组件)

...
  {{menu.main-dock}}
...

main-dock.hbs(组件)

...
{{menu.calendar-dock-footer}} 
...

calendar-dock-footer.hbs(带按钮的组件)

<div class="row ht-calendar-footer-content">
    <button class="btn btn-sm btn-info" {{action 'createCalendar'}}>
        <label> Add Calendar</label>
    </button>
</div>

我尝试将操作从 calendars.hbs 传递到带有按钮的组件，并且它运行，但我需要从带有按钮的组件调用 calendars.js 内的方法。

Answer 1

在组件的 Controller 中使用sendAction('createCalendar',params)。您的组件的 Controller 不知道您的日历中的 Controller 。这就是 Mirza Memic 在您的评论中提到的“行动向上、数据向下”原则。您可以处理 route 的操作。如果您熟悉从组件级别(从组件 -> 路由)开始向数据库发送查询，则原理相同。

http://emberjs.com/api/classes/Ember.Component.html#method_sendAction