CODEWITHSUNDEEP
javascriptember.js
vinay3206
vinay3206

Reputation: 73

Can I give Template name to Ember components

I want to something like this: 

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

                       templateName:'my-temp'
                });

Upvotes: 5

Views: 5599

Answers (3)

Johnny Oshika
Johnny Oshika

Reputation: 57582

Yes, you can specify a template name. I just tried and it works. Here's how:

App.SimplyHelloComponent = Ember.Component.extend({

    layoutName: 'components/my-temp'

});

script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>

Now you would call your component like this:

{{simply-hello}}

Upvotes: 1

intuitivepixel
intuitivepixel

Reputation: 23322

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.

Upvotes: 1

Justin Giancola
Justin Giancola

Reputation: 330

This works, but 'components/' is added as a prefix to the templateName provided for the lookup.

So if you want to use the name 'my-temp', use

<script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>

for an inline template or have your build tools precompile your my-temp template from the components/ template subdirectory.

Upvotes: 0

Related Questions