javascript - Can I give Template name to Ember components - Stack Overflow

admin管理员组

文章数量:1416661

I want to something like this:

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

                       templateName:'my-temp'
                });

I want to something like this:

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

                       templateName:'my-temp'
                });

• javascript
• ember.js

Share Improve this question Follow edited Sep 16, 2013 at 4:50 n1ckolas 4,45033 gold badges3939 silver badges4343 bronze badges asked Sep 16, 2013 at 4:19 vinay3206vinay3206 7311 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Answer edited in response to your ments

After your ments 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 ponents/ember-test.

For example assume you have this ponent class:

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

Then your template should be like this:

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

But since this is the default behaviour, defining the templateName in your ponent 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 ponents prefix. And it's also important that by convention the ponent template name must include a "-" in it's name.

You then use your custom ponent 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 ponent, title and body, this is necessary since your ponent 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 ponent BTW. As you can see it contains inside the variable names we set when we uses the ponent in the template.

Hope it helps.

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

App.SimplyHelloComponent = Ember.Component.extend({

    layoutName: 'ponents/my-temp'

});

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

Now you would call your ponent like this:

{{simply-hello}}

This works, but 'ponents/' 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="ponents/my-temp">
...
</script>

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

本文标签： javascriptCan I give Template name to Ember componentsStack Overflow