Rendering non-application template inside of application template problem


#1

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.

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:

<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>

#2

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.


#3

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


#4

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

Yes, sure. I apologize

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 

#5

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


#6

Hi pixelhandler,

yes, if I change my code like this:

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:

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’…:frowning: Maybe I’m entering it in the wrong format, I don’t really know…

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


#7

@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});`

#8

Hi pixelhandler,

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

Now Ember crashes with:

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.
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?


#9

Ok, I’m giving this up…:frowning:

Maybe ember doesn’t support this.

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