How do I supply the index route with a template Ember 2?

I want to create an ember application as follows:

var app = Ember.Application.create({
  rootElement: document.getElementById('root'),
  name: 'my-application',
  IndexRoute: Ember.Route.extend({
      model: function() {
        console.log('model');
      },
      afterModel: function(model, transition) {

      },
      template: Ember.Handlebars.compile('<div id="test"></div>'),
    }),
  locationType: 'hash',

});

The problem is that I dont get the test div in the DOM. How come?

This yields the same problem:

var app = Ember.Application.create({
  rootElement: document.getElementById('root'),
  name: 'riotclient-launcher',
  IndexRoute: Ember.Route.extend({
      model: function() {
        console.log('model');
      },
      afterModel: function(model, transition) {

      },
    }),
  TEMPLATES: {
    index: Ember.Handlebars.compile('<div id="test"></div>'),
  },
  locationType: 'hash',

});

http://ift.tt/1TJFi6f