Ember.js Rendering default content to a nested outlet

0
votes

How do I render default content into a nested outlet?

For example, if I have an index template such as this:

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

And a nested routes:

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('default');
        this.resource('photo', { path: ':id' });
    });
});

That works fine when I use to link-to helper to load the page into the outlet. However, I cannot work out how to render default content into the outlet when the page first loads.

If I do something like this:

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this._super(controller, model);
        this.render('default');
    },
});

It renders the default content into the main outlet. If I try to specify a named outlet instead:

this.render('default', { outlet: 'centre' });

I get the following error message:

Error while processing route: index.index Assertion Failed: An outlet (centre) was specified but was not found. Error: Assertion Failed: An outlet (centre) was specified but was not found.

Even when using a named outlet:

{{outlet "centre"}}

Any help appreciated.

2
ember.js
Index is your route, so you are going to need to name your route IndexIndexRoute according to your naming schema – oshikryu
Agreed with @oshikryu for your scenario. It probably makes sense to change the routing to something more sane in your case. – Kalman

2 Answers

0
votes

Remove the index resource, it's already created for you and will make things confusing. Also, if you're needing to hook renderTemplate this early in the game, you're probably not following Ember's conventions.

I would also suggest removing the default resource, as Ember provides that by way of index. The top template is application.hbs, which essentially just has an {{outlet}} in it. So in summary:

  • Delete the index template
  • Change id="default" to id="index"
  • Remove the index resource from your router map
0
votes

Thanks everyone, I used oshikryu's solution.

Templates:

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

JavaScript:

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('photo', { path: ':id' });
    });
});

App.IndexIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('default');
    }
});