javascript - 访问嵌套组件中的父属性

Question

预计可路由组件即将推出，我尝试在我的 Ember 2.0 应用程序中尽可能使用组件。我遇到了一个令人困惑的问题，即当以 block 形式提供时，我无法从模板访问父组件的属性。很可能这是不可能的，但我想确定一下。这是一个例子:

模板:

// templates/approvals.hbs
{{#x-secure/schedule/approvals}}

  {{#x-secure/layout/full sectionTitle=sectionTitle sectionDescription=sectionDescription}}
    ...
  {{/x-secure/layout/full}}

{{/x-secure/schedule/approvals}}

组件模板:

// templates/components/schedule/approvals.hbs
{{yield}}

组件:

// components/schedule/approvals.js
import Ember from 'ember';

export default Ember.Component.extend({

  /////////////////////////////////////
  // PROPERTIES
  /////////////////////////////////////

  sectionTitle: 'Scheduling: Approvals',
  sectionDescription: 'Lots of magical , fanstastic stuff.'

});

我遇到的问题是我无法从父组件(approvals)访问 sectionTitle 和 sectionDescription 并通过将其放入 layout/full 组件中。但是，如果我从组件 block 中删除代码并将其移至 templates/components/schedule/approvals.hbs 模板，它将按预期工作。是否无法从组件的 block 形式访问父组件的属性？

谢谢!

Answer 1

确实不可能。组件的属性在组件的模板中可用，但在实例化组件的模板中不可用。

如果您需要组件来使某些东西可用，它应该显式地产生它们:

// templates/components/schedule/approvals.hbs
{{yield sectionTitle sectionDescription}}

并使用组件:

// templates/approvals.hbs
{{#x-secure/schedule/approvals as |title description|}}

  {{#x-secure/layout/full sectionTitle=title sectionDescription=description}}
    ...
  {{/x-secure/layout/full}}

{{/x-secure/schedule/approvals}}

请注意 as |x y ...| 表示法，为生成的值分配名称。

任何东西都可以通过这种方式产生，包括 this (不过要小心，这会破坏封装)和操作。