Ember.js: How do I include compiled templates correctly in index.html?

Question

I am new to ember.js. I managed to pre-compile templates using a Grunt file. However, when I include them in an index.html, I see an empty page, templates are not rendered. What am I doing wrong? If I don't compile templates and include directly in index.html it works.

I installed everything using yeoman.io (using bower packages grunt-ember-templates, ember, webapp scaffolding)

My index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My New App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/handlebars/handlebars.js"></script>    
  <script src="bower_components/ember/ember.js"></script>
  <script src="scripts/templates.js"></script>
  <script src="scripts/app.js"></script>
</body>
</html>

My App.js:

    App = Ember.Application.create();

    App.Router.map(function() {
      // put your routes here
    });

    App.IndexRoute = Ember.Route.extend({
      model: function() {
        return ['red', 'yellow', 'blue'];
      }
    });

Templates:

Edit: application.hbs

    <h2>Welcome to Ember.js</h2>

    {{outlet}}

Edit: index.hbs

    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>

Compiled templates in templates.js:

define(["ember"], function(Ember){

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1;


  data.buffer.push("<h2>Welcome to Ember.js</h2>\n\n");
  stack1 = helpers._triageMustache.call(depth0, "outlet", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
  return buffer;

});

Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1, self=this;

function program1(depth0,data) {

  var buffer = '', stack1;
  data.buffer.push("\n  <li>");
  stack1 = helpers._triageMustache.call(depth0, "item", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
  data.buffer.push("</li>\n ");
  return buffer;
  }

  data.buffer.push("\n<ul>\n    ");
  stack1 = helpers.each.call(depth0, "item", "in", "model", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0,depth0,depth0],types:["ID","ID","ID"],data:data});
  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
  data.buffer.push("\n</ul>\n");
  return buffer;

});

});

Joachim H. Skeie Joachim H. Skeie · Accepted Answer · 2014-03-26T10:48:35

You're not specific about how you are compiling your templates. Are they from *.hbs files, or are you using a different approach ?

It seems to me, that you are attempting to compile your templates.html file as a single template, as it has this code in the template itself:

data.buffer.push("\n<script type=\"text/x-handlebars\">\n

Each of your template files should only contain the contents of the template, and not the script tag itself.

Normally, you will put each .hbs file in a separate file that together with the used to determine the name of the template.

I did a presentation earlier, where I am live coding an application using grunt. This screencast do show how you can organize your .hbs files, while the source code shows how they are complied. This shows how my development process is, and it goes through building a complete app with grunt as the build system.

The presentation is up on YouTube: https://www.youtube.com/watch?v=KH5RreHtaaQ The source code is on GitHub: https://github.com/joachimhs/WarmCroc-Ember

Hope that helps!

Ember.js: How do I include compiled templates correctly in index.html?

2 Answers