# Rendering non-application template inside of application template problem

**URL:** <https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137>\
**Category:** Uncategorized\
**Created:** [August 26, 2014, 10:05pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137 "2014-08-26T22:05:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tomas](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@Tomas](https://discuss.emberjs.com/u/Tomas)\
**Post date:** [August 26, 2014, 10:05pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/1 "2014-08-26T22:05:32Z")

</div>

Hi guys,

can you please help me with howto render non-application template into main application template? What I’m trying to achieve is a simple thing, render template itemlist into named outlet ‘content’ in the application template.

Problem is that Ember crashes eventually, obviously I’m missing something, can you please help me? Thanks a million in advance.

```auto
App = Ember.Application.create();

App.CommodityAdapter = DS.RESTAdapter.extend({
    host: 'http://localhost:9080/myproject-1.0-SNAPSHOT'
}); 

App.Commodity = DS.Model.extend({
  name: DS.attr('string'),
  price: DS.attr('number'),
  count: DS.attr('number'),
  itemshot: DS.attr('string')
});

App.Router.map(function() {
  this.resource('commodity', {path: '/commodity/:commodity_id'});
  this.resource('itemlist', {path: '/'});
});

App.ItemListRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('commodity');
  }
});

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render('itemlist', {into: 'application', outlet: 'content'});
  }
});

```

Handlebars:

```auto
<script type="text/x-handlebars" data-template-name='application'>
  {{outlet 'content'}}
</script>

<script type="text/x-handlebars" data-template-name='itemlist'>    
  <h2>Items in our shop</h2>
  <div id='navigation' style="width: 600px; overflow: hidden; ">
      <div style="width: 150px; float:left;">
         <ul>
         {{#each model}}
          <li>
            {{#link-to "commodity" this}}
              {{name}} 
            {{/link-to}}
          </li>
          {{/each}}
        </ul>
      </div>
      <div style="overflow: hidden;">
        {{outlet}}
      </div>
  </div>    
</script>

<script type="text/x-handlebars" id='commodity'>
  <div>
     <ul>
         <li>{{name}}</li>
         <li>{{price}}</li>
         <li>{{count}}</li>
    <li><img {{bindAttr src="itemshot"}} /></li>
     </ul>
  </div>
</script>
```

---

<div class="post-metadata">

**Author:** ![pixelhandler](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pixelhandler/32/18649_2.png) [@pixelhandler](https://discuss.emberjs.com/u/pixelhandler)\
**Post date:** [August 26, 2014, 11:58pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/2 "2014-08-26T23:58:51Z")

</div>

> [@Tomas](#):
>
> App.ApplicationRoute

Does it work if you call `this._super(controller, model)` inside your `renderTemplate` method, before calling `this.render`? The application template may need to be rendered before you can render into it.

Also this seems like a post for StackOverflow.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [August 27, 2014, 2:44am UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/3 "2014-08-27T02:44:58Z")

</div>

> [@Tomas](#):
>
> Problem is that Ember crashes eventually, obviously I’m missing something, can you please help me? Thanks a million in advance.

Can you provide a stacktrace or the exception that is thrown?

---

<div class="post-metadata">

**Author:** ![Tomas](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@Tomas](https://discuss.emberjs.com/u/Tomas)\
**Post date:** [August 27, 2014, 7:14am UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/4 "2014-08-27T07:14:37Z")

</div>

> Can you provide a stacktrace or the exception that is thrown?

Yes, sure. I apologize

```auto
Error while processing route: itemlist Cannot read property 'connectOutlet' of undefined TypeError: Cannot read property 'connectOutlet' of undefined
    at appendView (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:24161:19)
    at EmberObject.extend.render (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:23740:9)
    at App.ApplicationRoute.Ember.Route.extend.renderTemplate (http://localhost:9080/catalogue/js/app.js:22:10)
    at apply (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:18381:27)
    at superWrapper [as renderTemplate] (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:17958:15)
    at EmberObject.extend.setup (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:22990:16)
    at applyHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45490:30)
    at callHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45484:14)
    at handlerEnteredOrUpdated (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:44244:7)
    at http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:44213:18 
```

---

<div class="post-metadata">

**Author:** ![pixelhandler](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pixelhandler/32/18649_2.png) [@pixelhandler](https://discuss.emberjs.com/u/pixelhandler)\
**Post date:** [August 27, 2014, 7:52pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/5 "2014-08-27T19:52:10Z")

</div>

@Tomas I had that same error yesterday, I had to render the application template prior to using an outlet in the application template.

---

<div class="post-metadata">

**Author:** ![Tomas](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@Tomas](https://discuss.emberjs.com/u/Tomas)\
**Post date:** [August 27, 2014, 8:40pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/6 "2014-08-27T20:40:40Z")

</div>

Hi pixelhandler,

yes, if I change my code like this:

```auto
App.ItemListRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('commodity');
  }
});

App.ItemListController = Ember.ObjectController.extend({
  title: 'ItemList'
});

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this._super(controller, model);
    this.render('itemlist', {into: 'application', outlet: 'content'});
  }
```

then itemlist template is rendered into application template, as you said. Problem is that itemlist template now uses model from application route, which is empty, because my REST call is inside of itemlist route.

So I tried to change the code to force itemlist template rendered inside of application template to use itemlist controller:

```auto
App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this._super(controller, model);
    this.render('itemlist', {into: 'application', outlet: 'content', controller: 'itemlist'});
  }
});
```

But Ember complains now that he can’t find controller ‘itemlist’…☹Maybe I’m entering it in the wrong format, I don’t really know…

```auto
Error while processing route: itemlist You passed `controller: 'itemlist'` into the `render` method, but no such controller could be found. Error: You passed `controller: 'itemlist'` into the `render` method, but no such controller could be found.
    at new Error (native)
    at Error.EmberError (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:13538:23)
    at normalizeOptions (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:24117:17)
    at EmberObject.extend.render (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:23735:19)
    at App.ApplicationRoute.Ember.Route.extend.renderTemplate (http://localhost:9080/catalogue/js/app.js:34:10)
    at apply (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:18381:27)
    at superWrapper [as renderTemplate] (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:17958:15)
    at EmberObject.extend.setup (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:22990:16)
    at applyHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45490:30)
    at callHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45484:14) 
```

I tried to debug lookup function, but it’s too hard to understand for me what’s going on in there, because I’m still Ember learner…

thanks a lot in advance for help.

regards

Tomas

---

<div class="post-metadata">

**Author:** ![pixelhandler](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pixelhandler/32/18649_2.png) [@pixelhandler](https://discuss.emberjs.com/u/pixelhandler)\
**Post date:** [August 28, 2014, 8:37pm UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/7 "2014-08-28T20:37:27Z")

</div>

@Tomas I’ve been using something like

```
`var itemlistController = this.controllerFor('itemlist');` 

```

And assigning a reference to the controller like so:

```
`this.render('itemlist', {into: 'application', outlet: 'content', controller: itemlistController});`

```

---

<div class="post-metadata">

**Author:** ![Tomas](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@Tomas](https://discuss.emberjs.com/u/Tomas)\
**Post date:** [August 29, 2014, 6:02am UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/8 "2014-08-29T06:02:23Z")

</div>

Hi pixelhandler,

thanks a million lot for reply, but it still doesn’t work…☹

Now Ember crashes with:

```auto
The controller named 'itemlist' could not be found. Make sure that this route exists and has already been entered at least once. If you are accessing a controller not associated with a route, make sure the controller class is explicitly defined. Error: Assertion Failed: The controller named 'itemlist' could not be found. Make sure that this route exists and has already been entered at least once. If you are accessing a controller not associated with a route, make sure the controller class is explicitly defined.
```

```auto
at new Error (native)
    at Error.EmberError (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:13538:23)
    at Object.Ember.assert (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:3722:15)
    at EmberObject.extend.controllerFor (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:23459:15)
    at App.ApplicationRoute.Ember.Route.extend.renderTemplate (http://localhost:9080/catalogue/js/app.js:34:35)
    at apply (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:18381:27)
    at superWrapper [as renderTemplate] (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:17958:15)
    at EmberObject.extend.setup (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:22990:16)
    at applyHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45490:30)
    at callHook (http://localhost:9080/catalogue/js/libs/ember-1.7.0.js:45484:14) 
```

As you can see I have controller defined correctly…

I’m thinking about a best approach, I would like to have for example navigation bar in the separate template, then upper menu bar in another template and sending content from both mentioned templates into content outlet of application template for example…All in order to have applicationTemplate as simple as possible and just render there templates associated with their controllers…

Or is this a bad approach?

---

<div class="post-metadata">

**Author:** ![Tomas](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@Tomas](https://discuss.emberjs.com/u/Tomas)\
**Post date:** [August 31, 2014, 9:46am UTC](https://discuss.emberjs.com/t/rendering-non-application-template-inside-of-application-template-problem/6137/9 "2014-08-31T09:46:26Z")

</div>

Ok, I’m giving this up…☹

Maybe ember doesn’t support this.

I will give it another try with embdeding non-application template into another template. We will see.