CODEWITHSUNDEEP
ember.jsexpresshandlebars.jsgrunt-ember-templates
JDillon522
JDillon522

Reputation: 19666

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

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"
      }
    }
  }
});

Upvotes: 0

Views: 390

Answers (1)

H1D
H1D

Reputation: 758

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", }

Upvotes: 1

Related Questions