title: How does Ember.js reference Grunt.js precompiled Handlebars templates?
body: <p>I've been exploring Ember.js, along with Grunt.js but I can't understand how Ember.js is able to find and use precompiled Handlebars templates. Right now my Gruntfile.js looks like this:</p>
  
  <pre><code>module.exports = function(grunt) {
  
  // Project configuration.
  grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  handlebars: {
    compile: {
      files: {
         "js/templates.js": "templates/*.hbs",
      }
    }
  }
  });
  
  // Load the plugin that handles the handlebars compiling
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  
  // Default task(s).
  grunt.registerTask('default', ['handlebars']);
  
  };
  </code></pre>
  
  <p>And my app.js Ember views are declared like so (routes and controllers are left out):</p>
  
  <pre><code>App.LogoView = Ember.View.extend({
    templateName: 'logo',
    classNames: ['logo']
  });
  
  App.TabsView = Ember.View.extend({
    templateName: 'tabs',
    classNames: ['tabs']
  });
  
  App.TabView = Ember.View.extend({
    classNames: ['content'],
    tabPositions: {
      tab1: {
        width: '90px',
        left: '82px'
      },
      tab2: {
        width: '180px',
        left: '172px'
      },
      tab3: {
        width: '271px',
        left: '263px'
      }
    },
    animateTab: function() {
      var left, tab, width;
      tab = this.get('templateName');
      width = this.get('tabPositions.' + tab + '.width');
      left = this.get('tabPositions.' + tab + '.left');
      Ember.run.next(function() {
        $('div.tabs').removeClass('tab1 tab2 tab3');
        $('div.tabs').addClass(tab);
        $('div.slider div.foreground').stop().animate({
          'width': width
        }, 1000);
        $('div.slider div.handle').stop().animate({
          'left': left
        }, 1000);
      });
    },
    didInsertElement: function() {
      this.animateTab();
    }
  });
  
  App.SliderView = Ember.View.extend({
    templateName: 'slider',
    classNames: ['slider']
  });
  
  App.Tab1View = App.TabView.extend({
    templateName: 'tab1'
  });
  
  App.Tab2View = App.TabView.extend({
    templateName: 'tab2'
  });
  
  App.Tab3View = App.TabView.extend({
    templateName: 'tab3'
  });
  </code></pre>
  
  <p>And this is my file structure:</p>
  
  <pre><code>--/
    |--js/
      |--app.js
      |--ember.js
      |--handlebars.js
      |--jquery.js
      |--templates.js
    |--templates/
      |--application.hbs
      |--logo.hbs
      |--slider.hbs
      |--tab1.js
      |--tab2.js
      |--tab3.js
      |--tabs.js
    |--Gruntfile.js
    |--index.html
    |--package.json
    |--server.js
  </code></pre>
  
  <p>So I'm using the <code>&lt;script type="text/x-handlebars" data-template-name="slider"&gt;</code> syntax in my index.html file to reference templates by name and that works fine. What I don't understand, is how Ember.js is supposed to use the precompiled templates. </p>
  
  <p>Right now, I'm using Grunt.js to compile those and they are outputted to templates.js. According to the Ember docs when an application loads, it will look for the application template. How does that work with index.html and by changing the file name of the template, is that changing the template's name? Could someone point me in the right direction as to how Ember.js uses precompiled templates? Thanks!</p>