CODEWITHSUNDEEP
ember.jshandlebars.jsgruntjs
blueFast
blueFast

Reputation: 44331

How to instantiate the Ember Application when using precompiled templates with grunt-ember-templates

(This questions is related to this one, but now I have moved to grunt-ember-templates instead of grunt-contrib-handlebars)

I am trying to split my ember.js handlebars templates in several files, in order to make the code base more manageable. I am using grunt-ember-templates, configured as follows:

ember_templates: {
    compile: {
        options: {
            templateName: function(sourceFile) {
                return sourceFile.replace(/app\/templates\//, ''); // <%= yeoman.dist %>/scripts/
            }
        },
        files: {
            '<%= yeoman.dist %>/scripts/templates.js': [
                '<%= yeoman.app %>/templates/**/*.hbs'
            ]
        }
    }
}

This creates a dist/scripts/templates.js as expected, which my client is happily loading. The templates.js looks like this:

Ember.TEMPLATES["accounts"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
    ...

This looks fine to me: the templates are saved in Ember.TEMPLATES array, with expected keys. There is even an application key, further down the generated templates.js file:

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {

Which is coming from templates/application.hbs:

<section class="toolbar">
</section>
<section class="main_section">
  <nav>
      ...
  </nav>

  {{ outlet }}

</section>

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      ...
</div>

Still, I am getting this error when templates.js is loaded (which is actually embedded inside scripts.js, see below my index.html):

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

What does this criptical error mean and how can I get rid of it?

This is my Ember Application:

this.App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    VERSION: '1.0.0',
    ready: function () {
        console.log('App version: ' + App.VERSION + ' is ready.');
    }
});

This is my ApplicationView:

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

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>

Upvotes: 2

Views: 1244

Answers (2)

blueFast
blueFast

Reputation: 44331

For the record: my problem was solved by changing the order in which the javascript files are loaded.

The templates.js must be loaded after ember is loaded.

I thought that ember needs the templates defined before loading, but this is actually completely wrong: since the templates are stored in Ember.TEMPLATES, ember must be loaded before the templates are. Then the templates can be loaded, and then the application can be created.

The reason why I did not find this bug before is that ember is not complaining at all in the console.

Upvotes: 2

emk
emk

Reputation: 60922

I've been using template: instead of templateName:, and it seems to work fine:

template: Ember.TEMPLATES['application']

There may be a better way to do this. But this will at least get you unstuck.

Upvotes: 1

Related Questions