Given these templates
<script type="text/x-handlebars">
<h3>Application outlet:</h3>
<div class="outlet">
{{outlet}}
<div>
<h3><code>'base'</code> outlet:</h3>
<div class="outlet base-outlet">
{{outlet 'base'}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>I am the application index, I should be in the application outlet.</h1>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<p>I am foo, I have my own outlet here:</p>
<h3>Foo Outlet:</h3>
<div class="outlet foo-outlet">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="foo/index">
<p>I am foo index, I should be inside <code>#foo-outlet</code> (green border)</p>
</script>
And these routes:
App.Router.map(function() {
this.resource('foo', function() {
this.resource('bar');
});
});
App.IndexRoute = Ember.Route.extend({
afterModel: function() {
this.transitionTo('foo.index');
}
});
App.FooRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({into: 'application', outlet: 'base'});
}
});
I would expect the foo/index
template to be rendered inside the {{outlet}}
contained in the foo template, however it is rendered into the applications outlet, there is a live example here: JS Bin - Collaborative JavaScript Debugging
Note if I put a call to this._super()
in renderTemplate
I get the foo/index
sort of in the right place, but the foo
template is rendered twice, see JS Bin - Collaborative JavaScript Debugging