CODEWITHSUNDEEP
ember.js
shime
shime

Reputation: 9008

accessing property in wrapped Ember.js component

I have a simple component like this:

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

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

with its template defined as

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

and I want to render it inside of template like this

# app/templates/application.hbs

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

The counter is however not being render here and I think that's because the context is set to outer context. How do I render a component like this and enforce it to use the component scope?

Upvotes: 0

Views: 69

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

The context of application.hbs is the application controller, counter is defined on the component unless you yield it from inside the component it will lookup counter on the controller.

outside-component.hbs {{yield counter}}

Application.hbs

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

Twiddle

Upvotes: 1

Related Questions