How to use ember.js templates in an ember-cli project


Hi, I’m updating my project from ember.js to ember-cli. There are several ember component in my project following the ember guides, for example:

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

<script type="text/x-handlebars" id="index">

However, I’m a bit confused about the new structure, such as there is a template named app/templates/foo/bar.hbs:

<div class="bar">

How can I render this template in other .hbs files?



I’m not sure I fully understand the question, but in general, the id attribute of your previous inline templates should map exactly to the template path in ember-cli.

So components/blog-post should be found at templates/components/blog-post.hbs.

To render your foo/bar.hbs template in another template, you could use a partial like so:

{{partial "foo/bar"}}

Hope that helps?


Thanks for your help, and you are right. There must be some error in my previous project so that some components cannot be rendered. I’ll check that.

Thanks again.


Pay attention to naming convention. I was struggling with {{partial}} and think I didn’t follow the naming convention. In my case it’s dash vs camelCase

Dashes for file names folder names html tags/ember components CSS classes URLs

camelCase for JavaScriptJSON