ember.js - Access component properties from within yield block -

i have component ui-button-group access properties on yield block.

the ui-button-group component has open property. ui-button component can passed property toggled on click. property bound open property of parent ui-button-group component.

{{#ui-button-group }}     {{#ui-button action="finalize"}}      finalize invoice    {{/ui-button}}      {{#ui-button togglepropery=component.open}}        <span class="caret"></span>     {{/ui-button}}      {{#ui-dropdown }}        <li><a href="#">delete</a></li>     {{/ui-dropdown}}   {{/ui-button-group}} 

as temporary work around have setup property on controller , passed both ui-button-group , 'ui-button`.

anyone know way access component instance within yield block?

i pulled off modifying _yield function in component include component context.

here working example.

http://jsbin.com/xuvuz/2/

update

in current release 1.6.0 view property in passed in block refers component.

http://jsbin.com/xuvuz/3

//components/ui-button-group.js export default ember.component.extend({   classnames: ['ui-button-group'],   classnamebindings: ['open'],   open: false })  //components/ui-button.js export default ember.component.extend({   tagname: 'button',   togglepropery: null,    click: function() {     var toggle = this.get('togglepropery');      if (!ember.isnone(toggle)) {       this.toggleproperty('togglepropery');           }      this.sendaction();    } });   //templates/index.hbs {{#ui-button-group }}    {{#ui-button action="finalize"}}     finalize invoice   {{/ui-button}}    {{#ui-button togglepropery=view.open}}     <span class="caret"></span>   {{/ui-button}}    {{#ui-dropdown }}     <li><a href="#">delete</a></li>   {{/ui-dropdown}} {{/ui-button-group}} 

old hack

export default ember.component.extend({    classnames: ['ui-button-group'],    classnamebindings: ['open'],    open: false,     _yield: function(context, options) {     var view = options.data.view,       parentview = this._parentview,       template = get(this, 'template');       if (template) {       ember.assert("a component must have parent view in order yield.", parentview);        view.appendchild(ember.view, {         isvirtual: true,         tagname: '',         _contextview: parentview,         template: template,         component: view,   //added line         context: get(parentview, 'context'),         controller: get(parentview, 'controller'),         templatedata: { keywords: parentview.clonekeywords() }       });     }   },  }); 

now have added component: view view options can access component so.

{{#ui-button-group }}    {{#ui-button action="finalize"}}     finalize invoice   {{/ui-button}}    {{#ui-button togglepropery=_view.component.open}}     <span class="caret"></span>   {{/ui-button}}    {{#ui-dropdown }}     <li><a href="#">delete</a></li>   {{/ui-dropdown}} {{/ui-button-group}} 

i propose adding component keyword generated yield view.