How to separate my templates into .hbs files

1

I have an example app where in the index.html i have all my templates.

So I separated it into .hbs files.

Now how can I put the templates into my index.html ?

I’ve read that i must pre-compile the files with grunt, gulp, brocoli or whatever, but I don’t understand it. Also i want to know if there is any suggestions about using one in particular. I’m using node with express.

Thanks you so much!

2

I would recommend having a look at Ember CLI. There’s a great Getting Started guide at The Ember CLI - Introduction - Ember CLI Guides

You might have to do some manual work to fit your current appliction within the Ember CLI file structure but it’s going to be worth it! :smiley:

3

In my experience, if you’re not already familiar with how Ember.js works, I would suggest not using Ember CLI. The creators themselves acknowledge that it’s very new and still a WIP. If you’re not comfortable with the Ember idioms yet, Ember CLI will probably cause you a few headaches.

I currently use this Grunt plugin and it works great. (It is outdated, but it’s easier to setup than the replacement, and works just as well.) Just point it at a directory with your appropriately named template files and it’ll compile it into a Javascript file that you can include in your page like any other file.

As a reference, my configuration looks like this:

grunt.initConfig({
    ember_handlebars: {
        all: {
            src: 'src/templates/**/*.hbs',
            dest: 'output/javascripts/templates.js'
        }
    }
});

Then I just include templates.js in my page. That’s all there is to it.

1 Like
4

So the task to do is:

Use grunt, gulp, brocoli, etc. to compile my .hbs files into a unique file ‘templates.js’ and then import this in my page?

5

Yes. A template compiler will compile the templates into normal Javascript. From there, you should include that file in your page after your include Ember but before you include any other application files. Like this;

<script src="lib/ember.js"></script>
<script src="build/templates.js"></script>
<script src="build/app.js"></script>

Ember will then automatically detect your templates. Just remember to name the files correctly. Give them the same names that you would put in the data-template-name attribute in your HTML.

2 Likes
6

Very nice!, thanks you a lot, now I’m going to try this :slight_smile:

7

How is this done without using any external libraries like EmberCLI or Grunt? Phrased another way, how can you do this out of the box?

8

Yes, it can be done. We’ve just written a howto on separating templates. It is a bit lengthy to put it here, you can find it at: Improving Ember.js performance. Part 1: Separating the templates :: The Multicloud blog

9

Just starting out and I’m also having the same issue with separating my template files out. I’ve recently updated to 1.9 and handlebars 2.0 (building with gulp) Currently receiving the following error [Uncaught Error: Unknown template object: function] Using the following build task…

concat = require('gulp-concat'),
sass = require('gulp-sass'),
handlebars = require('gulp-handlebars'),
wrap = require('gulp-wrap'),
declare = require('gulp-declare');

gulp.task(‘templates’, function() { gulp.src(‘app/template/*.hbs’) .pipe(handlebars({ handlebars: require(‘ember-handlebars’) })) .pipe(wrap(‘Ember.Handlebars.template(<%= contents %>)’)) .pipe(declare({ namespace: ‘TestApp.TEMPLATES’, noRedeclare: true, processName: function(path) { var path = path.replace(‘app/template/’, ‘’), name = declare.processNameByPath(path);

      return name.split('.').join('/');
    }
  }))
  .pipe(concat('templates.js'))
  .pipe(gulp.dest('app/template/'));

});

Is there a bug with compiling the templates or am i missing something?

Thanks,

D

10

That error Unknown template object: function indicates that you have at least one Handlebars 1.x template being loaded. This could be coming from another library or plugin that you are using, or it could be because you are not precompiling with Handlebars 2.0 (hard to tell without a more concrete reproduction).

11

@DTracker:

@rwjblue is right. The problem lies in the fact that gulp-handlebars has not yet been updated to handle Handlebars 2.0 compilation. However, there’s another gulp plugin that I switched to that implements the new compiler. For what I’ve needed so far, it works. Here’s the link: npm and github.

There’s pretty good documentation there on how to implement it in your gulpfile script.

12

This has helped me a lot. I’ve noticed in using your initConfig that the template name in the compiled ‘templates.js’ file included the relative path to the hbs files. In my case, the folder structure was templates > [resource folder] > some_template.hbs and so the generated template file was something like this: Ember.TEMPLATES[templates/resource_folder/some_template] = … and this caused my app to break. to fix this, I extended your initConfig like so

grunt.initConfig({
        emberTemplates: {
            all: {
                src: 'templates/**/*.hbs',
                dest: 'js/templates.js'
            },
            options: {
                templateName: function(name) {
                    return name.substring(name.lastIndexOf('/')+1);
                }
            }
        }

    });

This might help someone stuck with the same problem