Where do I put my Grunt compiled Ember.js Templates in my HTML file?

390 views Asked by At

I'm working on a simple Ember.js and Express app and up to now all my templates have been in my index.html file. This is my first time using Grunt for anything much less precompile templates. (I'm using Grunt-Ember-Handlebars to tackle the compiling)

I've moved all my templates into a handlebars folder and they compile into templates.js in the same folder.

My question is this: where do I include the script tag linking to templates.js in my HTML file?

Here is how I have all my scrips laid out:

<script src="../js/jquery.js"></script>    
  <script src="../js/libs/handlebars-1.1.2.js"></script>
  <script src="../js/libs/ember-1.3.0.js"></script>
    <script src="http://builds.emberjs.com/beta/ember-data.js"></script>

    <!-- APP  -->
    <script src="templates.js" type="text/javascript"></script>       
    <script src="../js/app.js"></script>
      <script src='../js/router.js'></script>
      <script src='../js/controllers/controllers.js'></script>

My path to my templates.js file is correct so thats not an issue. But it always returns with errors stating:

Assertion failed: Could not find "index" template or view.

The only file I know I need to include it after is my ember.js file. Other than that, it makes no difference in error output if I include it after or before any files in my App.

Thanks for the help ahead of time!

Edit: Here is my Gruntfile:

grunt.initConfig({
  ember_handlebars: {
    compile: {
      options: {
        namespace: "emberApp.TEMPLATES"
      },
      files: {
        "views/templates.js" : "handlebars/*.hbs"
      }
    }
  }
});
1

There are 1 answers

3
H1D On BEST ANSWER

It doesn't matter where to put them. Seems like they have wrong naming.

  1. Put templates into templates
  2. Name them correctly (application.hbs for application template)
  3. Use this grunt command

ember_handlebars: { options: { processName: function(name) { return name.replace(/(templates\/|\.hbs)/g, ''); } }, files: { "templates.js": "templates/**/*.hbs", }