Proper way to access the component from within a yield block


#1
{{#x-foo}}
   <button {{action target=view}}>Send to component</button>
{{/x-foo}}

The above used to work but I believe somewhere between 1.5.x and 1.7 view became the component’s parentView (which I understand and not debating). However, from within the yield I still need to be able to interface with the component,

My work around was something along the lines of overriding the yield function of my component:

_yield: function (context, options) {
		var view       = options.data.view,
			parentView = this._parentView,
			template   = Ember.get(this, 'template');

		if (template) {
			Ember.assert('A Component must have a parent view in order to yield.', parentView);

			view.appendChild(Ember.View, {
				isVirtual: true,
				tagName: '',
				_contextView: parentView,
				template: template,
				context: Ember.ObjectProxy.create({
					content:   options.data.insideGroup ? Ember.get(this, 'origContext') : Ember.get(parentView, 'context'),
					component: this // <---- this
				}),
				controller: Ember.get(parentView, 'controller'),
				templateData: { keywords: parentView.cloneKeywords(), insideGroup: options.data.insideGroup }
			});
		}
	}

Now everywhere where I used view I use component within the template.

Does anyone else happen to know of a more elegant solution? Perhaps I’m missing something that ember is providing me out of the box. The only other thing I can think of is turning the yielded content into a view and registering the component with the child view programmatically.


#2

+1

Experiencing this issue now, looking for the correct way to send actions to the component rather than the surrounding context. Our use case is that we have a component that can have several buttons, however the positioning of these buttons needs to be flexible within the yield block.

Any suggestions here?


#3

Ember has since solved this with Block params: http://emberjs.com/blog/2015/02/0C7/ember-1-10-0-released.html

{{yield this}} is what you are after. You may also be able to leverage bind-action so you don’t have to pass the target. Haven’t tried this myself.


#4

http://jsbin.com/zipofomamu/1/edit?html,js,output is an example of how you might do this with the upcoming bind-action