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

Ember CLI
1

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>

<script type="text/x-handlebars" id="index">
    {{blog-post}}
</script>

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">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</div>

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

Thanks!

2

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?

3

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.

4

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