訪問嵌套組件中的父級屬性

Question

為了期待即將推出的Routable組件，我嘗試在Ember 2.0應用程序中盡可能使用組件。 我遇到一個令人困惑的問題，當我以塊形式提供模板時，無法從模板訪問父組件的屬性。 不可能做到這一點可能很好，但希望確定。 這是一個例子：

模板：

// 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.'

});

我遇到的問題是，我無法訪問sectionTitle和sectionDescription從父組件（ approvals ），並把它傳遞到layout/full成分。 但是，如果我從組件的塊中刪除代碼並將其移至templates/components/schedule/approvals.hbs模板，它將按預期工作。 只是不可能從組件的塊形式訪問父組件的屬性？

謝謝！

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 |xy ...| 將名稱分配給產生值的符號。

可以通過這種方式產生任何結果，包括this （盡管要小心，但會破壞封裝）和操作。