Can I give Template name to Ember components

Question

I want to something like this:

App.SimplyHelloComponent = Em.Component.extend({
                       classNames: ['bold', 'italic', 'blue']

                       templateName:'my-temp'
                });

Answer 1

Answer edited in response to your comments

After your comments I did some testing and you where right, to have everything working correctly you should follow the conventions and name your class name the same as your template, so the template for EmberTestComponent should be called components/ember-test.

For example assume you have this component class:

App.EmberTestComponent=Ember.Component.extend({
  templateName:'components/ember-test'
});

Then your template should be like this:

<script type="text/x-handlebars" data-template-name="components/ember-test">
  <h1>{{title}}</h1>
  <p>{{body}}</p>
</script>

But since this is the default behaviour, defining the templateName in your component class can also be omitted resulting in a simple class definition like:

App.EmberTestComponent=Ember.Component.extend({});

However it is important that your template includes the components prefix. And it's also important that by convention the component template name must include a "-" in it's name.

You then use your custom component like this:

<script type="text/x-handlebars" data-template-name="index">
  {{#each}}
    {{ember-test title=title body=body}}
  {{/each}}
</script>

Note also how we pass the needed parameters to the component, title and body, this is necessary since your component does not know anything about it's context, it will only refer to the information we pass into it, that's the whole point of a component BTW. As you can see it contains inside the variable names we set when we uses the component in the template.

Hope it helps.