I'm trying to understand Ember routing and template rendering with a simple example. I have a page like the following:
<html>
<head>.....</head>
<body>
<script type="text/x-handlebars" data-template-name="cars">
cars<br/>
</script>
<script type="text/x-handlebars" data-template-name="cars/new">
cars new
</script>
<script type="text/x-handlebars">
<header id="header">
{{outlet header}}
</header>
<section id="main">
{{outlet main}}
</section>
<footer id="footer">
Some footer
</footer>
</script>
<!--lib files-->
<!--script will go here-->
</body>
</html>
Throughout the application, all contents need to be entered in the main outlet. I have a javascript file with the following contents:
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource("cars",function (){
this.route("new");
});
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.CarsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'main' });
}
});
App.CarsNewRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'main' });
}
});
The problem is that cars
template is properly being rendered while cars/new
isn't. How can I correct this issue ?
new
in thecars
template. (Although in that case I would expect a run-time error--do you see anything?) Try removing the namemain
from{{outlet main}}
, and killing therenderTemplate
methods and see what happens. – user663031cars
template, then it MUST contain an output for its subroutes to render into. Add an empty{{outlet}}
and I predictcars/new
will render into that. – user663031cars/index
template. – user663031