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>