Templates as separate files hbs

1

I’m starting with Ember.js, with a back-end in PHP.

I noticed that in the documentation, mostly in the “Templates” has some examples of files with “.hbs”.

I wonder how do I split my templates in separate files.

example:

js/templates/header.hbs
js/templates/footer.hbs

and in index.html invoke:

<script type="text/x-handlebars">
    {{view "header"}}
    
    {{outlet}}
    
    {{view "footer"}}
</script>

Please, how do I do that without using third party scripts.

Look at options like:

  • Grunt - It’s disheartening to have several files only pair that.
  • RequireJS - This seems to change the way of working with ember.js

Ember.js has some core extension to enable? Or do you have any plans to enable this?

2

Just use partials, which doesn’t change how you work with templates. Just create a template and include it in your page, then use {{partial 'templateName'}} and that will render the template within the the current context.

3

It was a little confusing as to how it all run. I am using “http://gulpjs.com/” and it was decided to refernente templates.

Thanks.

4

In order to place your templates in separate .hbs/.handlebars files instead of just sticking them all directly in your index.html you will need to use some sort of build process/asset pipeline, ember does not provide this out of the box.

Their are quite a few build tools out there that will help with this though, Broccoli, Gulp, and Brunch to name a few. You could also use Grunt, however many would argue that it should be treated more as a task runner than a build tool, and it is comparatively quite slow, especially with larger projects.

Broccoli is my build tool of choice, and has garnered a large following in the ember community. It is also being used as the build pipeline for ember-cli, the official command line tool for quickly generating and scaffolding ember.js applications. Even though it is still a work in progress, I highly recommend it.

5

Give this a try: gulp-ember-handlebars - npm

6

And this one https://github.com/dgeb/grunt-ember-templates