I have a rather simple Ember app, but even then there are already some 30 handlebars templates defined in the index.html file.
How can I extract these files from the html file and organize them identical to the models, controllers, routes, etc. script folders ?
At this moment, I do not want to pre-compile the templates (I understood Ember is not fully compatible with pre-compiled templates). I just want to have the templates better organised (in a folder structure) so that further development and maintenance becomes less error prone ...
Hope somebody can give some tips.
My index.html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<body>
<!-- APPLICATION (always rendered) -->
<script type="text/x-handlebars" id="application">
<header>
{{#linkTo 'publications'}}Publications{{/linkTo}} | {{#linkTo 'admin'}}Admin{{/linkTo}} | {{#linkTo 'about'}}About{{/linkTo}} | {{#linkTo 'login'}}Login{{/linkTo}}
</header>
<div class="row-fluid" id="applicationOutlet">
{{outlet}}
</div>
</script>
<!-- ADMIN -->
<script type="text/x-handlebars" id="admin">
<div class="row-fluid">
<div class="span3">
Select a function <br />
<ul>
<li>{{#linkTo 'categories'}}Categories{{/linkTo}}</li>
<li>{{#linkTo 'authors'}}Authors{{/linkTo}}</li>
</ul>
</div>
<div class="span9" id="adminOutlet">
{{outlet}}
</div>
</div>
</script>
<!-- ADMIN/AUTHORS -->
<script type="text/x-handlebars" id="authors">
<div class="row-fluid">
<div class="span3">
Authors ({{numberOfAuthors}})<br />
<table>
{{#each author in content}}
<tr><td>{{#linkTo 'authors.show' author}}{{author.name}}{{/linkTo}}</td></tr>
{{else}}
<tr><td>No authors defined</td></tr>
{{/each}}
</table>
<br />
{{#linkTo 'authors.new'}}New author{{/linkTo}}
</div>
<div class="span6" id="authorsOutlet">
{{outlet}}
</div>
</div>
</script>
<!--called when no nested author is selected-->
<script type="text/x-handlebars" id="authors/index">
<div class="row-fluid">
<div class="span9">
Select an author or create a new one
</div>
</div>
</script>
......
<!-- SCRIPTS -->
<!--Libraries-->
<script src="scripts/libraries/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/moment.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/handlebars-1.0.0-rc.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/showdown.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/ember-1.0.0-rc.6.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/ember-data.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/libraries/tinymce/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
<!--Application-->
<script src="scripts/application/app.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/application/router.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/application/store.js" type="text/javascript" charset="utf-8"></script>
<!--Routes-->
<script src="scripts/routes/login_route.js"></script>
<script src="scripts/routes/about_route.js"></script>
<!--Routes: admin-->
<script src="scripts/routes/admin/admin_route.js"></script>
<!--Routes: admin/authors-->
<script src="scripts/routes/admin/authors/authors_show_route.js"></script>
<script src="scripts/routes/admin/authors/authors_route.js"></script>
<script src="scripts/routes/admin/authors/authors_new_route.js"></script>
thanks Marc