访问包装的Ember.js组件中的属性

Question

我有一个像这样的简单组件：

# app/components/outside-component.js
import Ember from 'ember';

export default Ember.Component.extend({
  counter: 1
});

将模板定义为

# app/templates/components/outside-component.hbs
{{yield}}

我想在模板中渲染它，就像这样

# app/templates/application.hbs

{{#outside-component}}
  {{counter}}
{{/outside-component}}

然而，计数器没有在这里呈现，我认为这是因为上下文设置为外部上下文。如何渲染这样的组件并强制它使用组件范围？

Answer 1

application.hbs的上下文是应用程序控制器，计数器是在组件上定义的，除非你从它将在控制器上查找counter的组件内部产生它。

<强>外component.hbs {{yield counter}}

<强> Application.hbs

{{#outside-component as |counter|}}
  {{counter}}
{{/outside-component}}

Twiddle