ember hbs templates as separate files

Question

I want to run ember.js (version 1.0.0 Final) examples provided on their first page.

They divided each handlebar template in separate file with .hbs extension.

So I just copied all of the code and created files with same names. When I run them nothing hapens. I am trying ROUTING example.

My index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0.js"></script>
  <script src="js/libs/ember-1.0.0.js"></script>
  <script src="js/libs/bootstrap.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

My templates are inside of the root directory and I copied them to /templates but that didn't help.

i do not load them, thought that they are loaded by framework — Didar Burmaganov, Sep 02 '13 at 06:50

score 23 · Accepted Answer · edited Aug 20 '14 at 00:00

When you have templates in different files, you have to load them and compile them as EmberJS doesn't detect files. There are few ways to do that.

1) Load them to Ember.TEMPLATES: Ember loads the templates and pushes them in to an object Ember.TEMPLATES. it stores the templates content with small name key as per EmberJS Naming conventions. So we ourselves can push the templates after compiling them.

Eg: If you have a template with the name 'post', load the post.hbs file through AJAX request then set,

// "data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)

So now you can access the template directly as

   {{partial 'post'}}

in handlebars or set as templateName for any view classes.

App.OtherView = Ember.View.extend({
   templateName: 'post'
});

So, you may have to end up loading all HBS files through AJAX request and compile them before loading your application. This is a big overhead for an application.

In order to ease this, we can pre-compile all templates and save them as JS(which actually pushes them in to the Ember.TEMPLATES object) and just load that JS. This can be achieved using a plug-in ember-templates which is also available as a grunt job grunt-ember-templates.

2) The second way is create a view object and set the compiled code to the template of each view after the AJAX request. The text plug-in of requirejs helps you to do that.

As nowadays Ember people suggest not to create a view object unless required, I suggest you follow the first way. The precompiled one is the best option which reduces a lot of work every time you create a template.

UPDATE : There are some project building tools which takes care of compiling handlebars templates. Yeoman and Ember-Cli are the ones you can have a look once.

Thanks, do you know tool for lazy loading templates? It would help if project will have a lot of templates and loading them at startup will be costly to client. — Didar Burmaganov, Sep 02 '13 at 09:48
yea there is a way to lazyload templates...I have a link which actually details about lazyload JS files you can use same for templates...http://madhatted.com/2013/6/29/lazy-loading-with-ember — thecodejack, Sep 02 '13 at 10:14
@CodeJack I have followed the precompiling templates and loading the JS file, but i am getting some compatible issues with ember-templates, http://stackoverflow.com/questions/23403577/version-compatible-issue-with-ember-precompile-ember-js-and-handlebars-js/23408724#23408724 — Jeevi, May 05 '14 at 09:57

score 3 · Answer 2 · answered Sep 03 '13 at 08:21

I build my templates with Grunt. It creates one template.js file which I load after Ember. This is my own Grunt config on coffescript:

module.exports = (grunt) ->
  tmpl_dir = 'app_src/templates'
  grunt.initConfig
    tmpl_dir: tmpl_dir
    ember_handlebars:
      options:
        processName: (path) ->
          re = new RegExp("^#{tmpl_dir}\/(.*)\.hbs$", 'i')
          r = path.match(re)
          path = r[1]
          path = path.replace /\_/g, '-'
          console.log '>', path
          path
      files:
        src: '<%= tmpl_dir %>/**/*.hbs'
        dest: 'public/js/templates.js'

  grunt.loadNpmTasks('grunt-ember-handlebars')

score 1 · Answer 3 · answered Sep 02 '13 at 08:09

1

You either need to use a build process to compile your templates and concatenate your application logic or you need to use some kind of module resolution implementation.

If you are using rails on the back-end then check out https://github.com/emberjs/ember-rails If not, check out https://github.com/stefanpenner/ember-app-kit and https://github.com/rpflorence/ember-tools

answered Sep 02 '13 at 08:09

ianpetzer

1,828
1
16
21

thank you for response, i'll try that tools! i've seen grunt which can minimize js and i think it would be nice to have tool which before production concats all templates and minifies them or make special logic when template is requested then load it and put it to cache and after load from cache – Didar Burmaganov Sep 02 '13 at 09:46

ember hbs templates as separate files

3 Answers3

Linked