Ember Components: id or data-template-name in Handlebars script tag?

1

The current Guide page for Ember Components shows this example:

<script type="text/x-handlebars" id="components/blog-post">
   <h1>Blog Post</h1>
   <p>Lorem ipsum dolor sit amet.</p>
</script>

In the JSbin example though, instead of the id attribute of the script tag, the data-template-name is used:

<script type="text/x-handlebars" data-template-name="components/blog-post">
   <h1>Blog Post</h1>
   <p>Lorem ipsum dolor sit amet.</p>
</script>

Which version is the correct one? Or are both valid?

2

data-template-name will have a higher precedence than id, as seen here. Both are “correct”.

1 Like
3

I’ve seen validators complain that the slash / character is not valid in the string accepted for ids so I always use data-template-name.

Example: Uncaught Error: Syntax error, unrecognized expression: script#page/loading

3 Likes
4

Every newbie like me will have this same question. Why not clarify it in the guide? I thought using id was required to make it a component but clearly that isn’t the case.

5

Huh, I’ve always used the data-template-name in the few cases where I’m not using a build tool. Didn’t even know using an id was an option, when would that ever be necessary?

6

FWIW I do a lot of live coding demos in front of audiences, and using id is significantly shorter/faster to type. I also have the feeling that it seems more familiar and less scary; it’s easier for me to say “just make the ID of the script tag the name of the template” than to have offer a sidebar on what data attributes are.

7

I had an issue with slashes in id attributes, so I started using data-template-name.

I can’t remember exactly under which circumstances, but I think it was related to some server-side precompilation errors.