Accessing component scope within template block - ember.js

Question

if I have a component called my-scope which is defined only as:
export default Ember.Component.extend({
foo: 'bar'
})
and then I use the component in a template, like so:
{{#my-scope}}
{{foo}}
{{/my-scope}}
How can I reach the scope of the surrounding block component? I have tried:
{{foo}}
{{component.foo}}
{{view.foo}}
Maybe this is a case where I need to use a view? Hoping not but maybe that is the case.
note: my use-case is far more complex but let's just say that normal binding approach to components {{#my-scope foo=outsideFoo}} ... {{/my-scope}} is not a workable example

Answer 1

Without knowing your specific use-case, it's hard to know if the following answer will work for you, but one thing is for sure - it is very much compliant with Ember 2.0 "data down, actions up" philosophy (see this excellent piece by Sam Selikoff).
You can create a component that sends an action up with the data that you want available in your surrounding context as follows:
App.XTestComponent = Ember.Component.extend({
foo: 'bar',
didInsertElement: function(){
this.sendAction('action', this.get('foo'));
}
});
Then, in your surrounding context (controller), you can catch the action and set the appropriate data:
App.ApplicationController = Ember.Controller.extend({
foo: 'controller',
actions: {
setFoo: function(param){
this.set('foo', param);
}
}
});
Now, you can use your foo variable in the surrounding context the way you showed in the example:
<script type="text/x-handlebars">
{{#x-test action='setFoo'}} Hmm {{ foo }} {{/x-test}}
</script>
<script type="text/x-handlebars" id='components/x-test'>
<h2>Testing</h2>
{{ yield }}
</script>
See a working example here
(In theory, you can do this using an observer and not just from inside didInsertElement, but I have not tested it.)

Answer 2

You can use _view.parentView to access the value of foo property inside the component. (Because there is an underscore in _view, to me that means that it's not public API, so they might get rid of it in the future - but it's around for now :))
Something like the following:
{{#x-test}} Inside c1: {{ _view.parentView.foo.name }} {{/x-test}}
Working demo here