Using grunt handlebars together with ember, to spl

I am trying to split my ember.js handlebars templates in several files, in order to make the code base more manageable.

Since we are using yeoman/grunt, I have come across this handlebars plugin. I have configured it as follows:

    handlebars: {
        compile: {
            options: {
                namespace: 'JST'
            },
            files: {
                '<%= yeoman.dist %>/scripts/templates.js': [
                    '<%= yeoman.app %>/templates/*.hbs'
                ],
            }
        }
    }

As suggested in the "Usage examples" section of the plugin. This is working as expected, generating a dist/scripts/templates.js file. But putting the templates in the 'JST' namespace makes them not accessible anymore to Ember. This is the error I am getting:

Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.

Some questions:

How can I "initialize" the handlebars templates, which are right now in templates.js, so that Ember can find them?
How can I tell ember where to place the templates in the DOM, since the templates are now out of the document body?

This is my index.html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title></title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/bootstrap.min.css"/>
    <link rel="stylesheet" href="styles/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/font-styles.css"/>
    <link rel="stylesheet" href="styles/main.css"/>
    <!-- endbuild -->

  </head>
  <body>

    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

    <!-- My templates used to be here, but now they are in templates.js -->

      <div class="pagination">
          <ul>
              <li><a href="#">Prev</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">Next</a></li>
          </ul>
      </div>
    </script>

    <!-- build:js scripts/scripts.js -->
    <script src="scripts/vendor/jquery-1.9.1.js"></script>
    <script src="scripts/vendor/handlebars.1.0.rc.3.js"></script>
    <script src="scripts/vendor/ember-1.0.0-rc.2.js"></script>
    <script src="scripts/vendor/ember-data.js"></script>
    <script src="scripts/vendor/bootstrap.min.js"></script>
    <script src="scripts/templates.js"></script>
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

  </body>
</html>

Since we are using yeoman/grunt, I have come across this handlebars plugin.

That's what is tripping you up. You're trying to use the grunt-contrib-handlebars plugin, and as a result compiled templates are not being added to Ember.TEMPLATES. It may be possible to configure grunt-contrib-handlebars to make this happen, but it would probably be easier to use (grunt-ember-templates)[https://github.com/dgeb/grunt-ember-templates] instead.

See How does Ember.js reference Grunt.js precompiled Handlebars templates? for more detail

How can I "initialize" the handlebars templates, which are right nor in templates.js, so that Ember can find them?

Ember does not care how things get into Ember.TEMPLATES. You can add/remove templates from it manually. For example:

Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');

How can I tell ember where to place the templates in the DOM, since the templates are now out of the document body?

It doesn't matter where your templates come from, all ember looks at is the template's id. The application.hbs template will be rendered into your application's root element (document.body by default) and all other templates are rendered into outlets, via view helpers, etc.