Specifying templateName for an Ember.Component which wraps content

I have a component which specifies a templateName, something like:

Lab.UiSelectComponent = Ember.Component.extend({
  templateName: "select"
});

Then the corresponding template looks something like this:

<div class="select">
  {{yield}}
</div>

I want to use this component wrapped around other content, for example:

{{#ui-select-component}}
  ... some content here ...
{{/ui-select-component}}

I see this error message being logged to the console:

Assertion failed: You cannot provide a template block if you also specified a templateName

Why is that asserted? I am new to ember so maybe I am mis-using the framework, but in my particular case I am constrained by a build tool (wro4j) which can’t output the conventional template name “components/ui-select-component”. This is the only way I can figure out to define my component as I need it, and I don’t understand what’s wrong with wrapping content and specifying a templateName. If your component wraps content, do you have to use the conventional template name?

1 Like

{{yield}} is used with layout templates which is specified with layoutName.

Here it is http://emberjs.jsbin.com/eXumAvi/1/edit

2 Likes

Got it! Thanks for the quick response.